Bule de afișare de text (or other content) atunci când treceți peste un element HTML.
Inline text Tooltip
Treceți cursorul peste propoziția de mai jos!
Londra 9 million este capitala Angliei.
Clasa w3-tooltip definește elementul HTML pentru a trece peste (tooltip container) .
Clasa W3 text definește textul tooltip:
Exemplu
<p class="w3-tooltip">London
<span
class="w3-text">9 million</span>
is the capital city of
England</p> Încearcă - l singur » Tag Tooltip inline
Treceți cursorul peste propoziția de mai jos!
Londra 9 million este capitala Angliei.
Clasa w3-tooltip definește elementul HTML pentru a trece peste (tooltip container) .
Clasa W3 text definește textul tooltip:
Exemplu
<p class="w3-tooltip">London
<span
class="w3-text w3-tag">9 million</span>
is the capital
city of England</p> Încearcă - l singur » Tooltip mare
Treceți cursorul peste această imagine pentru a vedea efectul:
O mașină este un vehicul cu roți, auto-alimentat cu motor utilizat pentru transport. Cele mai multe definiții ale termenului specifică faptul că mașinile de obicei au patru wheels.(Wikipedia)
Clasa w3-tooltip definește elementul HTML pentru a trece peste (tooltip container) .
Clasa W3 text definește textul tooltip:
Exemplu (text before the picture) de (text before the picture)
<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> Încearcă - l singur » Exemplu (text after the picture)
<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> Încearcă - l singur » Tooltip absolută
Dacă doriți ca tooltip să apară într - o poziție absolută, poziționați textul tooltip (w3-text) :
Exemplu
<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> Încearcă - l singur » colorat Tooltip
Dacă doriți un tooltip colorat, utilizați clasele W3-culori:
Tooltip rotunjit
Dacă doriți un tooltip rotunjit, utilizați clasele W3-rotunde:
Tooltip mici
Dacă doriți un mic tooltip, utilizați clasa-W3 mici:
Tooltip Tiny
Dacă doriți un tooltip mic, utilizați clasa-W3 mic:
Tooltip mare
Dacă doriți o tooltip mare, folosesc clasele-W3 mari: