W3.CSS- tooltips
Plaats de muisaanwijzer op de onderstaande zinnen:
Londen is de hoofdstad van Engeland.(9 million inhabitants)
Londen 9 million inhabitants is de hoofdstad van Engeland.
W3.CSS Tooltip-klassen
W3.CSS biedt de volgende tooltip-klassen:
| Klas | definieert |
|---|---|
| w3-knopinfo | Het tooltip-element |
| w3-tekst | De knopinfo-tekst |
Tooltip-element en tooltip-tekst
Knopinfo geeft tekst (of andere inhoud) weer wanneer u de muisaanwijzer op een HTML-element plaatst.
De klasse w3-tooltip definieert het element waarover de muisaanwijzer moet worden geplaatst (de tooltip-container).
De klasse w3-text definieert de tooltip-tekst.
Plaats de muisaanwijzer op de onderstaande zin:
Londen is de hoofdstad 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>
Knopinfo als tag
Plaats de muisaanwijzer op de onderstaande zin:
Londen 9 million inhabitants is de hoofdstad 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>
Knopinfo voor afbeeldingen
Beweeg over deze foto om het effect te zien:
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 (tekst voor de afbeelding)
<div class="w3-tooltip">
<p
class="w3-text">A car is a...</p>
<img src="img_car.jpg"
alt="Car">
</div>
Voorbeeld (tekst na de afbeelding)
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car">
<p
class="w3-text">A car is a...</p>
</div>
Absoluut gepositioneerde tooltip
Als u wilt dat de tooltip op een absolute positie verschijnt, plaatst u de tooltip-tekst 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 knopinfo
Als je een gekleurde tooltip wilt, gebruik dan de w3 -kleurklassen :
Voorbeeld
<span
class="w3-text w3-tag w3-red">9 million inhabitants</span>
Afgeronde knopinfo
Als je een afgeronde tooltip wilt, gebruik dan de w3- ronde klassen:
Voorbeeld
<span class="w3-text w3-tag w3-round-xlarge">9 million inhabitants</span>
Kleine knopinfo
Als je een kleine tooltip wilt, gebruik dan de w3-small class:
Voorbeeld
<span class="w3-text w3-tag w3-small">9
million inhabitants</span>
Kleine knopinfo
Als je een kleine tooltip wilt, gebruik dan de w3-tiny klasse:
Voorbeeld
<span class="w3-text w3-tag w3-tiny">9 million inhabitants</span>
Grote knopinfo
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>