Infobulles afficher du texte (ou autre contenu) lorsque vous survolez un élément HTML.
Inline Tooltip texte
Passez la souris sur la phrase ci-dessous!
9 London millions est la capitale de l' Angleterre.
La classe w3-tooltip définit l'élément HTML planer au- dessus (conteneur d'info - bulle).
La classe w3 texte définit le texte de l' infobulle:
Exemple
<p class="w3-tooltip">London
<span
class="w3-text">9 million</span>
is the capital city of
England</p> Try It Yourself » Inline Tooltip Tag
Passez la souris sur la phrase ci-dessous!
9 London millions est la capitale de l' Angleterre.
La classe w3-tooltip définit l'élément HTML planer au- dessus (conteneur d'info - bulle).
La classe w3 texte définit le texte de l' infobulle:
Exemple
<p class="w3-tooltip">London
<span
class="w3-text w3-tag">9 million</span>
is the capital
city of England</p> Try It Yourself » Grand Tooltip
Survolez cette image pour voir l'effet:
Une voiture est un véhicule à moteur auto-alimenté à roues utilisé pour le transport. La plupart des définitions du terme préciser que les voitures ont généralement quatre roues. (Wikipedia)
La classe w3-tooltip définit l'élément HTML planer au- dessus (conteneur d'info - bulle).
La classe w3 texte définit le texte de l' infobulle:
Exemple (texte avant l'image)
<div class="w3-tooltip">
<p
class="w3-text">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)</p>
<img src="img_car.jpg"
alt="Car" style="width:100%">
</div> Try It Yourself » Exemple (texte après l'image)
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car" style="width:100%">
<p
class="w3-text">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)</p>
</div> Try It Yourself » Tooltip Absolute
Si vous voulez que l'infobulle apparaisse dans une position absolue, positionner le texte de l'infobulle (w3-texte):
Exemple
<p class="w3-tooltip">London is the capital city
of England.
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9million</span></p> Try It Yourself » Colored Tooltip
Si vous voulez une info-bulle de couleur, utiliser les classes w3-couleur:
Tooltip arrondi
Si vous voulez une info-bulle arrondie, utiliser les classes w3-rondes:
Petit Tooltip
Si vous voulez une petite infobulle, utilisez la classe w3-petit:
minuscule Tooltip
Si vous voulez une petite infobulle, utilisez la classe w3-tiny:
Grand Tooltip
Si vous voulez un grand infobulle, utilisez les classes w3 grande: