Erstellen Sie Tooltips mit CSS.
Demo: Tooltip Beispiele
Ein Tooltip wird häufig verwendet, zusätzliche Informationen über etwas zu geben, wenn der Benutzer den Mauszeiger über ein Element bewegt:
Grund Tooltip
Erstellen Sie ein Tooltip, der angezeigt wird, wenn der Benutzer die Maus über ein Element bewegt:
Beispiel
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted
black; /* If you want dots under the hoverable text */
}
/* Tooltip text
*/
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show
the tooltip text when you mouse over the tooltip container */
.tooltip:hover
.tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip"> Hover
over me
<span class="tooltiptext"> Tooltip
text </span>
</div> Versuch es selber " Beispiel erklärt
Verwenden Sie HTML - Element) einen Behälter (wie <div> ) und fügen Sie den "tooltip" Klasse zu. Wenn der Benutzer die Maus über das <div> , wird es den Tooltip - Text zeigen.
Der Tooltip Text befindet sich in einem Inline - Element (wie platziert <span> ) mit class="tooltiptext" .
CSS) Der tooltip Klasse Verwendung position:relative , die den Tooltip - Text zu positionieren benötigt wird ( position:absolute .) Hinweis: Beispiele siehe unten wie den Tooltip zu positionieren.
Die tooltiptext Klasse enthält den eigentlichen Tooltiptext. Es ist standardmäßig ausgeblendet, und wird auf schweben (siehe unten) zu sehen sein. Außerdem haben wir einige grundlegende Arten hinzu: 120px Breite, schwarze Hintergrundfarbe, Schriftfarbe weiß, zentriert Text und 5px oben und unten Polsterung.
Die CSS3 border-radius Eigenschaft wird verwendet , abgerundete Ecken auf den Tooltip - Text hinzuzufügen.
Der :hover - Selektor wird verwendet , um den Tooltip - Text anzuzeigen , wenn der Benutzer die Maus über das bewegt <div> mit class="tooltip" .
Positionierung Tooltips
In diesem Beispiel wird der Tooltip auf der rechten Seite platziert (left:105%) des "hoverable" Text (<div>) . Beachten Sie auch , dass top:-5px verwendet wird, in der Mitte seines Containerelement zu platzieren. Wir verwenden die Nummer 5 , weil der Tooltip - Text eine obere und untere Polsterung von 5px hat. Wenn Sie seine Polsterung erhöhen, auch den Wert der Erhöhung top Eigenschaft , um sicherzustellen , dass es in der Mitte bleibt (wenn dies etwas ist , Sie möchten). Das gleiche gilt, wenn Sie den Tooltip auf der linken Seite platziert werden soll.
Rechts Tooltip
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
Ergebnis:
Linke Tooltip
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
Ergebnis:
Wenn Sie die Tooltip erscheinen oben oder unten wollen, siehe Beispiele unten. Beachten Sie, dass wir die Verwendung margin-left - Eigenschaft mit einem Wert von minus 60 Pixel. Dies ist das Tooltip oben zum Zentrum / unter dem hoverable Text. Es ist auf die Hälfte der Breite des Tooltip gesetzt (120/2 = 60).
Top Tooltip
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Ergebnis:
Bottom Tooltip
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Ergebnis:
Tooltip Arrows
So erstellen Sie einen Pfeil, der von einer bestimmten Seite des Tooltip, fügen Sie "leer" Inhalt nach Tooltip, mit dem Pseudo-Element - Klasse erscheinen soll ::after zusammen mit dem content Eigenschaft. Der Pfeil selbst erstellt Grenzen verwendet. Dadurch wird der Tooltip aussehen wie eine Sprechblase zu machen.
Dieses Beispiel zeigt, wie ein Pfeil auf dem Boden des Tooltip hinzuzufügen:
unten-Pfeil
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%;
/* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
Ergebnis:
Beispiel erklärt
Positionieren Sie den Pfeil im Tooltip: top: 100% wird auf den Pfeil am unteren Rand des Tooltip platzieren. left: 50% wird auf den Pfeil zentriert.
Hinweis: Die border-width - Eigenschaft gibt die Größe des Pfeils. Wenn Sie dies zu ändern, auch die Änderung margin-left Wert auf denselben. Dies hält den Pfeil zentriert.
Die border-color wird verwendet , um den Inhalt in einen Pfeil zu verwandeln. Wir setzen den oberen Rand zu schwarz, und den Rest transparent. Wenn alle Seiten schwarz waren, würden Sie mit einem schwarzen Quadrat-Box am Ende.
Dieses Beispiel zeigt, wie ein Pfeil an der Spitze des Tooltip hinzuzufügen. Beachten Sie, dass wir den unteren Rand Farbe dieses Mal eingestellt:
Top Arrow
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
Ergebnis:
Dieses Beispiel zeigt, wie ein Pfeil auf der linken Seite des Tooltip hinzuzufügen:
Linker Pfeil
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip
*/
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
Ergebnis:
Dieses Beispiel zeigt, wie ein Pfeil auf der rechten Seite des Tooltip hinzuzufügen:
Rechter Pfeil
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the
tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
Ergebnis:
Fade In Tooltips (Animation)
Wenn Sie im Tooltip Text zu verblassen wollen , wenn es um sichtbar zu sein, können Sie die CSS3 verwenden transition Eigenschaft zusammen mit der opacity Eigenschaft, und gehen davon , dass völlig unsichtbar zu 100% sichtbar, in einer Reihe von festgelegten Sekunden (1 Sekunde in unserem Beispiel):
Beispiel
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
} Versuch es selber " Hinweis: Sie werden erfahren Sie mehr über Übergänge und Animationen später in unserem Tutorial.