W3.CSS- Tooltips
Bewegen Sie den Mauszeiger über die folgenden Sätze:
London ist die Hauptstadt von England.(9 million inhabitants)
London 9 million inhabitants ist die Hauptstadt von England.
W3.CSS-Tooltip-Klassen
W3.CSS bietet die folgenden Tooltip-Klassen:
| Klasse | Definiert |
|---|---|
| w3-Kurzinfo | Das Tooltip-Element |
| w3-Text | Der Tooltip-Text |
Tooltip-Element und Tooltip-Text
QuickInfos zeigen Text (oder andere Inhalte) an, wenn Sie den Mauszeiger über ein HTML-Element bewegen.
Die Klasse w3-tooltip definiert das Element, über das der Mauszeiger bewegt werden soll (der Tooltip-Container).
Die Klasse w3-text definiert den Tooltip-Text.
Bewegen Sie den Mauszeiger über den folgenden Satz:
London ist die Hauptstadt von England.(9 million inhabitants)
Beispiel
<p class="w3-tooltip">London
<span
class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>
Tooltip als Tag
Bewegen Sie den Mauszeiger über den folgenden Satz:
London 9 million inhabitants ist die Hauptstadt von England.
Beispiel
<p class="w3-tooltip">London
<span
class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>
Bild-Tooltip
Bewegen Sie den Mauszeiger über dieses Bild, um den Effekt zu sehen:
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)
Beispiel (Text vor dem Bild)
<div class="w3-tooltip">
<p
class="w3-text">A car is a...</p>
<img src="img_car.jpg"
alt="Car">
</div>
Beispiel (Text nach dem Bild)
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car">
<p
class="w3-text">A car is a...</p>
</div>
Absolut positionierter Tooltip
Wenn Sie möchten, dass der Tooltip an einer absoluten Position erscheint, positionieren Sie den Tooltip-Text mit CSS:
Beispiel
<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>
Farbiger Tooltip
Wenn Sie einen farbigen Tooltip wünschen, verwenden Sie die w3 -Farbklassen :
Beispiel
<span
class="w3-text w3-tag w3-red">9 million inhabitants</span>
Abgerundeter Tooltip
Wenn Sie einen abgerundeten Tooltip wünschen, verwenden Sie die w3- round - Klassen:
Beispiel
<span class="w3-text w3-tag w3-round-xlarge">9 million inhabitants</span>
Kleiner Tooltip
Wenn Sie einen kleinen Tooltip wünschen, verwenden Sie die Klasse w3-small :
Beispiel
<span class="w3-text w3-tag w3-small">9
million inhabitants</span>
Winziger Tooltip
Wenn Sie einen kleinen Tooltip wünschen, verwenden Sie die Klasse w3-tiny :
Beispiel
<span class="w3-text w3-tag w3-tiny">9 million inhabitants</span>
Großer Tooltip
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>