W3.CSS Tooltips
Beweeg oor die sinne hieronder:
Londen is die hoofstad van Engeland.(9 million inhabitants)
Londen 9 million inhabitants is die hoofstad van Engeland.
W3.CSS Tooltip Klasse
W3.CSS verskaf die volgende nutswenkklasse:
| Klas | Definieer |
|---|---|
| w3-nutspunt | Die tooltip-element |
| w3-teks | Die nutswenk-teks |
Tooltip-element en Tooltip-teks
Nutswenke wys teks (of ander inhoud) wanneer jy oor 'n HTML-element beweeg.
Die w3-tooltip- klas definieer die element om oor te beweeg (die tooltip-houer).
Die w3-teksklas definieer die nutswenk-teks.
Beweeg oor die sin hieronder:
Londen is die hoofstad van Engeland.(9 million inhabitants)
Voorbeeld
<p class="w3-tooltip">London
<span
class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>
Nutswenk as 'n merker
Beweeg oor die sin hieronder:
Londen 9 million inhabitants is die hoofstad van Engeland.
Voorbeeld
<p class="w3-tooltip">London
<span
class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>
Prentnutswenk
Beweeg oor hierdie prentjie om die effek te sien:
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)
Voorbeeld (teks voor die prentjie)
<div class="w3-tooltip">
<p
class="w3-text">A car is a...</p>
<img src="img_car.jpg"
alt="Car">
</div>
Voorbeeld (teks na die prentjie)
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car">
<p
class="w3-text">A car is a...</p>
</div>
Absolute geposisioneerde nutswenk
As jy wil hê dat die nutswenk in 'n absolute posisie moet verskyn, plaas die nutswenk-teks met CSS:
Voorbeeld
<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>
Gekleurde nutswenk
As jy 'n gekleurde nutswenk wil hê, gebruik die w3- kleurklasse :
Voorbeeld
<span
class="w3-text w3-tag w3-red">9 million inhabitants</span>
Afgeronde Tooltip
As jy 'n afgeronde nutswenk wil hê, gebruik die w3- ronde klasse:
Voorbeeld
<span class="w3-text w3-tag w3-round-xlarge">9 million inhabitants</span>
Klein nutswenk
As jy 'n klein nutswenk wil hê, gebruik die w3-small class:
Voorbeeld
<span class="w3-text w3-tag w3-small">9
million inhabitants</span>
Klein nutswenk
As jy 'n klein nutswenk wil hê, gebruik die w3-klein klas:
Voorbeeld
<span class="w3-text w3-tag w3-tiny">9 million inhabitants</span>
Groot nutswenk
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>