Tooltips angezeigt Text (oder andere Inhalte), wenn Sie über ein HTML-Element schweben.
Inline Tooltiptext
Bewegen Sie den Mauszeiger über den Satz unten!
9 London Millionen ist die Hauptstadt von England.
Die w3-Tooltip - Klasse definiert das HTML - Element zu schweben (Tooltip - Container).
Die w3-Text - Klasse definiert den Tooltip - Text:
Beispiel
<p class="w3-tooltip">London
<span
class="w3-text">9 million</span>
is the capital city of
England</p> Versuch es selber " Inline Tooltip Tag
Bewegen Sie den Mauszeiger über den Satz unten!
9 London Millionen ist die Hauptstadt von England.
Die w3-Tooltip - Klasse definiert das HTML - Element zu schweben (Tooltip - Container).
Die w3-Text - Klasse definiert den Tooltip - Text:
Beispiel
<p class="w3-tooltip">London
<span
class="w3-text w3-tag">9 million</span>
is the capital
city of England</p> Versuch es selber " Große Tooltip
Bewegen Sie den Mauszeiger über das Bild, um den Effekt zu sehen:
Ein Auto ist ein fahrbares, selbstbetriebenen Kraftfahrzeug für den Transport verwendet. Die meisten Definitionen des Begriffs angeben, dass Autos haben in der Regel vier Rädern. (Wikipedia)
Die w3-Tooltip - Klasse definiert das HTML - Element zu schweben (Tooltip - Container).
Die w3-Text - Klasse definiert den Tooltip - Text:
Beispiel (Text vor dem Bild)
<div class="w3-tooltip">
<p
class="w3-text">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>
<img src="img_car.jpg"
alt="Car" style="width:100%">
</div> Versuch es selber " Beispiel (Text nach dem Bild)
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car" style="width:100%">
<p
class="w3-text">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>
</div> Versuch es selber " Absolute Tooltip
Wenn Sie der Tooltip erscheinen in einer absoluten Position wollen, positionieren Sie den Tooltip-Text (w3-Text):
Beispiel
<p class="w3-tooltip">London is the capital city
of England.
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9million</span></p> Versuch es selber " Farbige Tooltip
Wenn Sie einen farbigen Tooltip wollen, verwenden Sie die w3-Farbklassen:
Abgerundete Tooltip
Wenn Sie eine abgerundete Tooltip wollen, verwenden Sie die w3-Runde Klassen:
Kleine Tooltip
Wenn Sie einen kleinen Tooltip wollen, verwenden Sie die w3-small-Klasse:
Tiny Tooltip
Wenn Sie einen kleinen Tooltip wollen, verwenden Sie die w3-tiny Klasse:
Große Tooltip
Wenn Sie eine große Tooltip wollen, verwenden Sie die w3-große Klassen: