W3.CSS Tooltips
Najeďte myší na následující věty:
Londýn je hlavním městem Anglie.(9 million inhabitants)
Londýn 9 million inhabitants je hlavním městem Anglie.
W3.CSS Tooltip Třídy
W3.CSS poskytuje následující třídy popisků:
| Třída | Definuje |
|---|---|
| w3-tooltip | Prvek nápovědy |
| w3-text | Text nápovědy |
Prvek popisku a text popisku
Popisky zobrazují text (nebo jiný obsah), když umístíte ukazatel myši na prvek HTML.
Třída w3-tooltip definuje prvek, na který se má umístit kurzor (kontejner s popisky).
Třída w3-text definuje text popisku.
Najeďte myší na větu níže:
Londýn je hlavním městem Anglie.(9 million inhabitants)
Příklad
<p class="w3-tooltip">London
<span
class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>
Popisek jako tag
Najeďte myší na větu níže:
Londýn 9 million inhabitants je hlavním městem Anglie.
Příklad
<p class="w3-tooltip">London
<span
class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>
Popisek obrázku
Umístěte ukazatel myši na tento obrázek a uvidíte efekt:
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říklad (text před obrázkem)
<div class="w3-tooltip">
<p
class="w3-text">A car is a...</p>
<img src="img_car.jpg"
alt="Car">
</div>
Příklad (text za obrázkem)
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car">
<p
class="w3-text">A car is a...</p>
</div>
Absolute Positioned Tooltip
Pokud chcete, aby se popiska zobrazila na absolutní pozici, umístěte text popisku pomocí CSS:
Příklad
<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>
Barevná nápověda
Pokud chcete barevný popis, použijte třídy barev w3- :
Příklad
<span
class="w3-text w3-tag w3-red">9 million inhabitants</span>
Zaoblená nápověda
Pokud chcete zaoblený popis, použijte třídy w3- round :
Příklad
<span class="w3-text w3-tag w3-round-xlarge">9 million inhabitants</span>
Malý popisek
Pokud chcete malý popis, použijte třídu w3-small :
Příklad
<span class="w3-text w3-tag w3-small">9
million inhabitants</span>
Tiny Tooltip
Pokud chcete malý popis, použijte třídu w3-tiny :
Příklad
<span class="w3-text w3-tag w3-tiny">9 million inhabitants</span>
Velký popisek
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>