CSS -Tooltip
Erstellen Sie QuickInfos mit CSS.
Demo: Tooltip-Beispiele
Ein Tooltip wird oft verwendet, um zusätzliche Informationen über etwas anzugeben, wenn der Benutzer den Mauszeiger über ein Element bewegt:
Grundlegender Tooltip
Erstellen Sie einen 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>
Beispiel erklärt
HTML: Verwenden Sie ein Containerelement (wie <div>) und fügen Sie die
"tooltip"Klasse hinzu. Wenn der Benutzer mit der Maus über dieses <div> fährt, wird der Tooltip-Text angezeigt.
Der Tooltip-Text wird innerhalb eines Inline-Elements (wie <span>) mit platziert class="tooltiptext".
CSS: Die tooltipKlasse use position:relative, die benötigt wird, um den Tooltip-Text zu positionieren ( position:absolute).
Hinweis: Siehe Beispiele unten zur Positionierung des Tooltips.
Die tooltiptextKlasse enthält den eigentlichen Tooltip-Text. Es ist standardmäßig ausgeblendet und wird beim Hover sichtbar (siehe unten). Wir haben auch einige grundlegende Stile hinzugefügt: 120 Pixel Breite, schwarze Hintergrundfarbe, weiße Textfarbe, zentrierter Text und 5 Pixel obere und untere Polsterung.
Die CSS border-radius-Eigenschaft wird verwendet, um dem Tooltip-Text abgerundete Ecken hinzuzufügen.
Der :hoverSelektor wird verwendet, um den Tooltip-Text anzuzeigen, wenn der Benutzer die Maus über das <div> mit bewegt class="tooltip".
Positionierungs-Tooltips
In diesem Beispiel wird der Tooltip rechts ( left:105%) neben dem „schwebbaren“ Text (<div>) platziert. Beachten Sie auch, dass top:-5pxverwendet wird, um es in der Mitte seines Containerelements zu platzieren. Wir verwenden die Zahl 5 , weil der Tooltip-Text eine obere und untere Auffüllung von 5 Pixel hat. Wenn Sie die Polsterung erhöhen, erhöhen Sie auch den Wert der topEigenschaft, um sicherzustellen, dass sie in der Mitte bleibt (falls Sie dies wünschen). Dasselbe gilt, wenn Sie möchten, dass der Tooltip links platziert wird.
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 angezeigt wird, sehen Sie sich die Beispiele unten an. Beachten Sie, dass wir die margin-leftEigenschaft mit einem Wert von minus 60 Pixel verwenden. Dies dient dazu, den Tooltip über/unter dem schwebenden Text zu zentrieren. Er ist auf die Hälfte der Tooltip-Breite eingestellt (120/2 = 60).
Oberer 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:
Unterer 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-Pfeile
Um einen Pfeil zu erstellen, der von einer bestimmten Seite der QuickInfo erscheinen soll, fügen Sie nach der QuickInfo „leeren“ Inhalt mit der Pseudo-Element-Klasse ::afterzusammen mit der content
Eigenschaft hinzu. Der Pfeil selbst wird mithilfe von Rahmen erstellt. Dadurch sieht der Tooltip wie eine Sprechblase aus.
Dieses Beispiel zeigt, wie Sie einen Pfeil am unteren Rand der QuickInfo hinzufügen:
Unterer 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
Pfeil innerhalb des Tooltips positionieren: top: 100%platziert den Pfeil am unteren Rand des Tooltips. left: 50%zentriert den Pfeil.
Hinweis: Die border-widthEigenschaft gibt die Größe des Pfeils an. Wenn Sie dies ändern, ändern Sie auch den margin-leftWert auf denselben Wert. Dadurch bleibt der Pfeil zentriert.
Der border-colorwird verwendet, um den Inhalt in einen Pfeil umzuwandeln. Wir setzen den oberen Rand auf schwarz und den Rest auf transparent. Wenn alle Seiten schwarz wären, würden Sie am Ende ein schwarzes Quadrat haben.
Dieses Beispiel zeigt, wie Sie einen Pfeil am oberen Rand der QuickInfo hinzufügen. Beachten Sie, dass wir dieses Mal die Farbe des unteren Rahmens festlegen:
Oberer Pfeil
.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 Sie links vom Tooltip einen Pfeil hinzufü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 Sie rechts vom Tooltip einen Pfeil hinzufü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:
Tooltips einblenden (Animation)
Wenn Sie den Tooltip-Text einblenden möchten, wenn er sichtbar wird, können Sie die CSS- transitionEigenschaft zusammen mit der opacity
Eigenschaft verwenden und in einer bestimmten Anzahl von Sekunden (1 Sekunde in unserem Beispiel):
Beispiel
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
}