CSS Tooltips
- Vorherige Seite CSS Animationen
- Nächste Seite CSS Bildstile
Erstellen Sie Tooltips (Tooltips) mit CSS.
Demonstration: Tooltip
Beispiel
Wenn der Benutzer den Mauszeiger auf ein Element bewegt, wird der Tooltip oft verwendet, um zusätzliche Informationen über ein Inhaltselement bereitzustellen:
Basis-Tooltip
Erstellen Sie eine Tooltips, die angezeigt wird, wenn der Mauszeiger auf ein Element bewegt wird:
Beispiel
<style>
/* Tooltip Container */
.tooltip {
Position: relativ;
Anzeigebeschreibung: inline-block;
Untere Kante: 1 px gepunktete Linie schwarz; /* Zeige unter dem textuell hervorgehobenen Text eine gepunktete Linie */
}
/* Tooltip Text */
.tooltip .tooltiptext {
Sichtbarkeit: unsichtbar;
width: 120px;
Hintergrundfarbe: schwarz;
Farbe: #fff;
Textausrichtung: zentriert;
Außenabstand: 5 px 0;
Eckradius: 6 px;
/* Positioniere den Text des Tooltips - siehe nachfolgenden Beispiel */
position: absolute;
Z-Index: 1;
}
/* Zeige den Text des Tooltips, wenn der Mauszeiger über dem Tooltip-Container gehalten wird */
.tooltip:hover .tooltiptext {
Sichtbarkeit: sichtbar;
}
</style>
<div class="tooltip">Bewegen Sie den Mauszeiger darauf</div>
<span class="tooltiptext">Tooltip Text</span>
</div>
Beispiel-Erklärung
HTML:
Verwenden Sie das Container-Element (z.B. <div>) und fügen Sie "tooltip" Klasse. Wenn der Benutzer den Mauszeiger auf diesen <div> bewegt, wird der Tooltip-Text angezeigt.
Der Tooltip-Text befindet sich in der class="tooltiptext" im eingebetteten Element (z.B. <span>) der
CSS:
tooltip Klasse wird verwendet position:relativewird verwendet, um den Tooltip-Text zu platzieren (position:absolute）。 Beachten Sie: Weitere Informationen zur Platzierung des Tooltips finden Sie in den folgenden Beispielen.
tooltiptext Klasse speichert den tatsächlichen Tooltip-Text. Standardmäßig ist er versteckt und wird bei der Mausüberlagerung sichtbar (siehe unten). Wir haben ihm einige grundlegende Stile hinzugefügt: 120 Pixel Breite, schwarzer Hintergrund, weißer Text, Text zentriert und 5px oberer und unterer Innenabstand (Padding).
CSS border-radius Eigenschaft wird verwendet, um dem Tooltip-Text runde Ecken hinzuzufügen.
wird verwendet, um den Tooltip-Text anzuzeigen, wenn der Benutzer den Mauszeiger auf den <div> mit der Klasse "tooltip" bewegt.:hover Wähler werden verwendet, um den Tooltip-Text anzuzeigen.
Positionierung des Tooltips
In diesem Beispiel befindet sich der Tooltip auf der rechten Seite des 'hoverbaren' Textes (<div>),left:105%）。 Beachten Sie auch,top:-5px wird verwendet, um ihn in der Mitte des Container-Elements zu platzieren. Wir verwenden die Zahl 5, weil die oberen und unteren Innenabstände des Tooltip-Texts 5px betragen. Wenn Sie den Innenabstand erhöhen, erhöhen Sie bitte auch top Werte der Eigenschaften, um sicherzustellen, dass er in der Mitte bleibt. Dies gilt ebenfalls, wenn Sie den Tooltip auf der linken Seite platzieren möchten.
Rechter Tooltip
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
Ergebnis:
Linker Tooltip
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
Ergebnis:
Wenn Sie möchten, dass der Tooltip oben oder unten positioniert ist, sehen Sie sich die folgenden Beispiele an. Beachten Sie, dass wir einen linken Außenabstand von minus 60 Pixeln (margin-left) verwendet haben. Dies dient dazu, den Tooltip mit dem überlagerten Text zentriert auszurichten. Dieser Wert ist die Hälfte der Tooltip-Breite (120/2 = 60).
Obere Tooltip-Beschreibung
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Die Hälfte der Breite (120/2 = 60) wird verwendet, um den Tooltip zentriert anzuzeigen */
}
Ergebnis:
Untere Tooltip-Beschreibung
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Die Hälfte der Breite (120/2 = 60) wird verwendet, um den Tooltip zentriert anzuzeigen */
}
Ergebnis:
Tooltip-Pfeil
Um einen Pfeil zu erstellen, der auf der angegebenen Seite des Tooltips angezeigt wird, fügen Sie nach dem Tooltip den Inhalt 'leer' hinzu und verwenden Sie die Pseudo-Element-Klasse ::after und content Eigenschaften. Der Pfeil selbst wird durch die Kanten erstellt. Dies macht den Tooltip wie eine Blase auszusehen.
Dieses Beispiel zeigt, wie man einen Pfeil am unteren Rand des Tooltips hinzufügt:
Unterer Pfeil
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* Am unteren Rand des Tooltips */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
Ergebnis:
Beispiel-Erklärung
Legt den Pfeil innerhalb des Tooltips fest:top: 100% Platziert den Pfeil am unteren Rand des Tooltips.left: 50% macht den Pfeil zentriert.
Hinweis:border-width Die Eigenschaft spezifiziert die Größe des Pfeils. Wenn Sie diese Einstellung ändern, ändern Sie bitte auch margin-left den Wert auf denselben Wert ändern. Dies macht den Pfeil zentriert.
border-color Wird verwendet, um den Inhalt in einen Pfeil zu verwandeln. Wir setzen die obere Kante auf schwarz und die anderen auf transparent. Wenn alle Kanten schwarz sind, erhalten wir letztendlich einen schwarzen quadratischen Rahmen.
Dieses Beispiel zeigt, wie man einen Pfeil auf der Oberseite des Tooltips hinzufügt. Beachten Sie, dass wir diesmal die Farbe der unteren Kante gesetzt haben:
Oberer Pfeil
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* Am oberen Rand des Tooltips */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
Ergebnis:
Dieses Beispiel zeigt, wie man einen Pfeil auf der linken Seite des Tooltips hinzufügt:
Linker Pfeil
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* Zum linken Rand des Tooltips */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
Ergebnis:
Dieses Beispiel zeigt, wie man einen Pfeil auf der rechten Seite des Tooltips hinzufügt:
Rechter Pfeil
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* Zum rechten Rand des Tooltips */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
Ergebnis:
Einblendendes Tooltip (Animation)
Wenn Sie eine Einblendung und Ausblendung des Tooltips-Texts wünschen, können Sie CSS transition Eigenschaft mit opacity Eigenschaften gemeinsam verwendet und innerhalb der angegebenen Sekunden (im Beispiel 1 Sekunde) von vollständig unsichtbar in 100% sichtbar werden:
Beispiel
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
- Vorherige Seite CSS Animationen
- Nächste Seite CSS Bildstile
