CSS-Tooltip

In diesem Artikel stellen wir vor, wie man Tooltips mit HTML und CSS erstellt.

Der Tooltip wird ausgelöst, wenn die Maus über das angegebene Element bewegt wird. Sehen Sie sich zunächst die folgenden vier Beispiele an:

Oben anzeigenTooltip-Text
Rechts anzeigenTooltip-Text
Unten anzeigenTooltip-Text
Links anzeigenTooltip-Text

Einfacher Tooltip

Der Tooltip wird angezeigt, wenn die Maus über das angegebene Element bewegt wird:

HTML-Code:

<style>
/*Tooltip-Container*/ .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; /*Gepunktete Linie beim Überfahren des Elements anzeigen*/ } /*Tooltip-Text*/ .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; /*Positionierung*/ position: absolute; z-index: 1; } /*Tooltip beim Überfahren mit der Maus anzeigen*/ .tooltip:hover .tooltiptext { visibility: visible; }
</style> <div class="tooltip">Bewegen Sie die Maus hierher<span class="tooltiptext">Tooltip-Text</span> </div>

Selbst ausprobieren »

Beispielanalyse

HTML)Verwenden Sie ein Containerelement (wie <div>) und fügen Sie"tooltip"Klasse hinzu. Wenn die Maus über das <div> bewegt wird, werden die Tooltip-Informationen angezeigt.

Platzieren Sie den Tooltip-Text in einem Inline-Element (wie <span>) und verwenden Sieclass="tooltiptext"。

CSS)tooltipKlassenverwendungposition:relative, für den Tooltip-Text muss ein Positionierungswert festgelegt werden.position:absolute。 Hinweis:Die folgenden Beispiele zeigen weitere Positionierungseffekte.

tooltiptextKlasse für den eigentlichen Tooltip-Text. Sie ist standardmäßig ausgeblendet und wird angezeigt, wenn die Maus über das Element bewegt wird. Einige Stile wie Breite, Hintergrundfarbe, Schriftfarbe usw. werden festgelegt.

CSS3 border-radiusDie Eigenschaft wird verwendet, um dem Tooltip abgerundete Ecken hinzuzufügen.

:hoverDer Selektor wird verwendet, um den Tooltip anzuzeigen, wenn die Maus über das angegebene Element <div> bewegt wird.

Positionierungs-Hinweis-Tool

Im folgenden Beispiel wird der Tooltip auf der rechten Seite des angegebenen Elements angezeigt (left:105%) 。

Hinweistop:-5pxEs entspricht der Positionierung in der Mitte des Containerelements. Verwenden Sie die Zahl5Da der obere und untere Innenabstand des Tooltip-Textes 5px beträgt.

Wenn Sie den Innenabstandswert ändern, sollte der Top-Wert entsprechend angepasst werden, damit sichergestellt werden kann, dass er mittig ausgerichtet ist.

Das gleiche Prinzip gilt, wenn der Tooltip auf der linken Seite angezeigt wird.

Anzeige rechts:

.tooltip .tooltiptext { top: -5px; left: 105%; }

Selbst ausprobieren »

Anzeige links:

.tooltip .tooltiptext { top: -5px; right: 105%; }

Selbst ausprobieren »

Wenn der Tooltip oben und unten angezeigt werden soll, müssen wir diemargin-left-Eigenschaft verwenden und sie auf -60px setzen. Diese Zahl wird berechnet, indem die Hälfte der Breite zum Zentrieren verwendet wird, d. h. width/2 (120/2 = 60).

Anzeige oben:

.tooltip .tooltiptext { width: 120px; bottom: 100%; left: 50%; margin-left: -60px; /*Die Hälfte der Breite (120/2 = 60) verwenden, um den Tooltip zu zentrieren*/ }

Selbst ausprobieren »

Anzeige unten:

.tooltip .tooltiptext { width: 120px; top: 100%; left: 50%; margin-left: -60px; /*Die Hälfte der Breite (120/2 = 60) verwenden, um den Tooltip zu zentrieren*/ }

Selbst ausprobieren »

Pfeil hinzufügen

Wir können das CSS-Pseudoelement ::after und das content-Attribut verwenden, um einen kleinen Pfeil für den Tooltip zu erstellen. Der Pfeil besteht aus Rahmen, aber kombiniert sieht der Tooltip wie eine Sprechblase aus.

Das folgende Beispiel zeigt, wie man einen unteren Pfeil zu einem oben angezeigten Tooltip hinzufügt:

Tooltip oben / Pfeil unten:

.tooltip .tooltiptext::after { content: " "; position: absolute; top: 100%; /*Tooltip unten*/ left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; }

Selbst ausprobieren »

Beispielanalyse

Positionieren Sie den Pfeil im Tooltip:top: 100%, der Pfeil wird unten am Tooltip angezeigt.left: 50%Wird verwendet, um den Pfeil zu zentrieren.

Hinweis:border-widthDie Eigenschaft legt die Größe des Pfeils fest. Wenn Sie sie ändern, müssen Sie auch denmargin-leftWert ändern. Auf diese Weise kann der Pfeil zentriert werden.

border-colorWird verwendet, um den Inhalt in einen Pfeil umzuwandeln. Setzen Sie den oberen Rahmen auf black und die anderen auf transparent. Wenn die anderen ebenfalls auf black gesetzt werden, wird es als schwarzes Viereck angezeigt.

Das folgende Beispiel zeigt, wie man oben am Tooltip einen Pfeil hinzufügt. Beachten Sie die Einstellungen für die Rahmenfarbe:

Tooltip unten / Pfeil oben:

.tooltip .tooltiptext::after { content: " "; position: absolute; bottom: 100%; /*Tooltip-Header*/ left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent black transparent; }

Selbst ausprobieren »

Die folgenden zwei Beispiele sind Pfeilbeispiele für die linke und rechte Seite:

Tooltip rechts / Pfeil links:

.tooltip .tooltiptext::after { content: " "; position: absolute; top: 50%; right: 100%; /*Tooltip linke Seite*/ margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent black transparent transparent; }

Selbst ausprobieren »

Tooltip links / Pfeil rechts:

.tooltip .tooltiptext::after { content: " "; position: absolute; top: 50%; left: 100%; /*Tooltip rechte Seite*/ margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent black; }

Selbst ausprobieren »

Einblendeffekt

Wir können die CSS3-Eigenschaft transition und die Eigenschaft opacity verwenden, um einen Einblendeffekt für den Tooltip zu erzielen:

Einblendeffekt:

.tooltip .tooltiptext { opacity: 0; transition: opacity 1s; } .tooltip:hover .tooltiptext { opacity: 1; }

Selbst ausprobieren »

Weitere Beispiele

Schöner CSS-Tooltip

Weitere Erweiterungen