Hover-Text in HTML hinzufügen

1. Verwenden Sie das Attribut title, um einen Hover-Text in HTML hinzuzufügen
2. Verwenden Sie das Attribut title mit dem Tag abbr, um einen Hover-Text in HTML hinzuzufügen

In diesem Artikel besprechen wir einige Möglichkeiten, einen Hover-Text in HTML hinzuzufügen. Ein Hover-Text ist ein Tooltip-Text, der erscheint, wenn wir mit der Maus über einen Text in HTML fahren.

Verwenden Sie das Attribut title, um einen Hover-Text in HTML hinzuzufügen

Wir können das Attribut title verwenden, um einen Hover-Text in HTML hinzuzufügen. Das Attribut kann mit jedem HTML-Element verwendet werden.

Es gibt zusätzliche Informationen über das Element. Wenn wir das Attribut title auf einem Element verwenden, erzeugt es einen Tooltip-Text oder einen Hover-Text, wenn wir die Maus über das Element bewegen.

Erstellen Sie beispielsweise einen Login-Button mit dem <button>-Tag. Schreiben Sie ein Attribut title in das Tag <button>.

Als nächstes schreiben Sie den Text this is a login button als Wert für das title-Attribut.

Wenn wir die Maus über die Schaltfläche bewegen, sagt ein Hover-Text: this is a login button. Hier haben wir das Attribut title mit einem Button, einem Inline-Element, implementiert.

Auf diese Weise können wir das Attribut title verwenden, um einen Hover-Text in HTML hinzuzufügen.

Beispielcode:

<button title="this is a login button">
  Login
</button>

Verwenden Sie das Attribut title mit dem Tag abbr, um einen Hover-Text in HTML hinzuzufügen

Diese Methode beschreibt, wie wir das Tag title verwenden können, um Hover-Text hinzuzufügen, während wir das Tag abbr verwenden. Das Attribut title und das abbr werden normalerweise zusammen verwendet.

Das abbr-Tag wird verwendet, um die Abkürzung zu schreiben, und das title-Tag wird verwendet, um die vollständige Form der Abkürzung während des Mouse-Hover anzuzeigen.

Betrachten Sie zum Beispiel den Satz The Undertaker is a WWE superstar. Umschließen Sie das Wort WWE mit dem Tag abbr.

Schreiben Sie in das Tag das Attribut title und geben Sie ihm den Wert World Wrestling Entertainment.

Als Ergebnis erscheint das Wort WWE mit einer gepunkteten Unterstreichung. Wenn wir den Mauszeiger darüber bewegen, erscheint ein Hover-Text mit der Aufschrift World Wrestling Entertainment.

So können wir das Attribut title mit dem Tag abbr verwenden, um einen Hover-Text in HTML zu erstellen.

Beispielcode:

The Undertaker is a <abbr title="World Wrestling Entertainment"> WWE </abbr> superstar.