Info -bulles W3.CSS
Survolez les phrases ci-dessous :
Londres est la capitale de l'Angleterre.(9 million inhabitants)
Londres 9 million inhabitants est la capitale de l'Angleterre.
Classes d'info-bulle W3.CSS
W3.CSS fournit les classes d'info-bulles suivantes :
| Classer | Définit |
|---|---|
| info-bulle w3 | L'élément d'info-bulle |
| w3-texte | Le texte de l'infobulle |
Élément d'info-bulle et texte d'info-bulle
Les info-bulles affichent du texte (ou un autre contenu) lorsque vous survolez un élément HTML.
La classe w3-tooltip définit l'élément à survoler (le conteneur d'info-bulles).
La classe w3-text définit le texte de l'info-bulle.
Survolez la phrase ci-dessous :
Londres est la capitale de l'Angleterre.(9 million inhabitants)
Exemple
<p class="w3-tooltip">London
<span
class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>
Info-bulle en tant que balise
Survolez la phrase ci-dessous :
Londres 9 million inhabitants est la capitale de l'Angleterre.
Exemple
<p class="w3-tooltip">London
<span
class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>
Info-bulle de l'image
Survolez cette image pour voir l'effet :
A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars typically have four wheels.(Wikipedia)
Exemple (texte avant l'image)
<div class="w3-tooltip">
<p
class="w3-text">A car is a...</p>
<img src="img_car.jpg"
alt="Car">
</div>
Exemple (texte après l'image)
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car">
<p
class="w3-text">A car is a...</p>
</div>
Info-bulle positionnée en absolu
Si vous souhaitez que l'info-bulle apparaisse dans une position absolue, positionnez le texte de l'info-bulle avec CSS :
Exemple
<p class="w3-tooltip">London
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9 million inhabitants</span>
is the capital of England.</p>
Info-bulle colorée
Si vous voulez une info-bulle colorée, utilisez les classes de couleurs w3 :
Exemple
<span
class="w3-text w3-tag w3-red">9 million inhabitants</span>
Info-bulle arrondie
Si vous voulez une info-bulle arrondie, utilisez les classes w3 - round :
Exemple
<span class="w3-text w3-tag w3-round-xlarge">9 million inhabitants</span>
Petite info-bulle
Si vous voulez une petite info-bulle, utilisez la classe w3-small :
Exemple
<span class="w3-text w3-tag w3-small">9
million inhabitants</span>
Petite info-bulle
Si vous voulez une petite info-bulle, utilisez la classe w3-tiny :
Exemple
<span class="w3-text w3-tag w3-tiny">9 million inhabitants</span>
Grande info-bulle
If you want a large tooltip, use the w3-large classes:
Example
<span class="w3-text w3-tag w3-xlarge">9 million inhabitants</span>
Animated Tooltip
If you want to fade in the tooltip, use the w3-animate-opacity class:
Example
<span class="w3-text w3-tag w3-animate-opacity">9 million inhabitants</span>