W3.Podpowiedzi CSS
Najedź kursorem na poniższe zdania:
Londyn jest stolicą Anglii.(9 million inhabitants)
Londyn 9 million inhabitants jest stolicą Anglii.
W3.CSS Klasy podpowiedzi
W3.CSS udostępnia następujące klasy podpowiedzi:
| Klasa | Definiuje |
|---|---|
| podpowiedź w3 | Element podpowiedzi |
| w3-tekst | Tekst podpowiedzi |
Element podpowiedzi i tekst podpowiedzi
Etykietki narzędzi wyświetlają tekst (lub inną zawartość) po najechaniu kursorem na element HTML.
Klasa w3-tooltip definiuje element, nad którym ma zostać umieszczony wskaźnik myszy (kontener podpowiedzi).
Klasa w3-text definiuje tekst podpowiedzi.
Najedź kursorem na zdanie poniżej:
Londyn jest stolicą Anglii.(9 million inhabitants)
Przykład
<p class="w3-tooltip">London
<span
class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>
Etykietka jako tag
Najedź kursorem na zdanie poniżej:
Londyn 9 million inhabitants jest stolicą Anglii.
Przykład
<p class="w3-tooltip">London
<span
class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>
Etykietka obrazu
Najedź na to zdjęcie, aby zobaczyć 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)
Przykład (tekst przed zdjęciem)
<div class="w3-tooltip">
<p
class="w3-text">A car is a...</p>
<img src="img_car.jpg"
alt="Car">
</div>
Przykład (tekst za zdjęciem)
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car">
<p
class="w3-text">A car is a...</p>
</div>
Etykietka dotycząca pozycji bezwzględnej
Jeśli chcesz, aby podpowiedź pojawiła się w pozycji bezwzględnej, umieść tekst podpowiedzi za pomocą CSS:
Przykład
<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>
Kolorowa podpowiedź
Jeśli chcesz mieć kolorową podpowiedź, użyj klas kolorów w3 :
Przykład
<span
class="w3-text w3-tag w3-red">9 million inhabitants</span>
Zaokrąglona podpowiedź
Jeśli chcesz mieć zaokrągloną podpowiedź, użyj klas rundy w3 :
Przykład
<span class="w3-text w3-tag w3-round-xlarge">9 million inhabitants</span>
Mała podpowiedź
Jeśli potrzebujesz małej podpowiedzi, użyj klasy w3-small :
Przykład
<span class="w3-text w3-tag w3-small">9
million inhabitants</span>
Mała podpowiedź
Jeśli chcesz mieć małą podpowiedź, użyj klasy w3-tiny :
Przykład
<span class="w3-text w3-tag w3-tiny">9 million inhabitants</span>
Duża podpowiedź
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>