Erstellen Sie Tooltips mit CSS.
Ein Tooltip wird häufig verwendet, um zusätzliche Informationen zu etwas anzugeben, wenn der Benutzer den Mauszeiger über ein Element bewegt:
Erstellen Sie einen Tooltip, der angezeigt wird, wenn der Benutzer die Maus über ein Element bewegt:
<style>
/* Tooltip container */
.tooltip-local {
position: relative;
display: inline-block;
border-bottom: 1px dotted
black; /* If you want dots under the hoverable text */
}
/* Tooltip text
*/
.tooltip-local .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-local:hover
.tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip-local">Hover
over me
<span class="tooltiptext">Tooltip
text</span>
</div>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Basic Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in a desirable way.</p>
</body>
</html>
HTML: Verwenden Sie ein Containerelement (wie <div>) und fügen Sie das hinzu "tooltip"
-Klasse hinzufügen. Wenn der Benutzer mit der Maus über dieses <div> fährt, wird es angezeigt Tooltip-Text.
Der Tooltip-Text wird in einem Inline-Element (wie <span>) mit class="tooltiptext"
platziert.
CSS: Die Klasse tooltip
verwendet position:relative
, Dies wird benötigt, um den Tooltip-Text zu positionieren (position:absolute
). Hinweis: Sehen Sie sich unten Beispiele zur Positionierung des Tooltips an.
Die Klasse tooltiptext
enthält den eigentlichen Tooltip-Text. Es ist Standardmäßig ausgeblendet und beim Hover sichtbar (siehe unten). Wir haben auch hinzugefügt einige grundlegende Stile: 120 Pixel Breite, schwarze Hintergrundfarbe, weiße Textfarbe, zentrierter Text und 5 Pixel Abstand oben und unten.
Die CSS-Eigenschaft border-radius
wird verwendet, um abgerundete Ecken zum Tooltip hinzuzufügen Text.
Der :hover
-Selektor wird verwendet, um den Tooltip-Text anzuzeigen, wenn der Benutzer den verschiebt Bewegen Sie die Maus über das <div> mit class="tooltip"
.
In diesem Beispiel wird der Tooltip rechts (left:105%
) des „schwebbaren“ Text (<div>). Beachten Sie außerdem, dass top:-5px
verwendet wird, um es in der Mitte seines Containerelements zu platzieren. Wir verwenden die Zahl 5, da der Tooltip-Text ein oberes und hat Bodenpolsterung aus 5px. Wenn Sie den Abstand erhöhen, erhöhen Sie auch den Wert der Eigenschaft top
auf Stellen Sie sicher, dass es in der Mitte bleibt (falls Sie dies wünschen). Das gleiche gilt, wenn der Tooltip links platziert werden soll.
.tooltip-local .tooltiptext {
top: -5px;
left:
105%;
}
Ergebnis :
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: -5px;
left: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Right Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
.tooltip-local .tooltiptext {
top: -5px;
right:
105%;
}
Ergebnis :
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: -5px;
right: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Left Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Wenn Sie möchten, dass der Tooltip oben oder unten angezeigt wird, sehen Sie sich die Beispiele an unten. Beachten Sie, dass wir die Eigenschaft margin-left
mit einem Wert von minus 60 verwenden Pixel. Dadurch wird der Tooltip über/unter dem schwebenden Text zentriert. Es ist eingestellt auf die Hälfte der Tooltip-Breite (120/2=60).
.tooltip-local .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Ergebnis :
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
.tooltip-local .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Ergebnis :
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Bottom Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Um einen Pfeil zu erstellen, der an einer bestimmten Seite des Tooltips erscheinen soll, fügen Sie „empty“ hinzu. Inhalt danach Tooltip, mit der Pseudoelementklasse ::after
zusammen mit dem Inhalt
Eigentum. Der Pfeil selbst wird mithilfe von Rahmen erstellt. Dadurch wird der Tooltip erstellt sehen aus wie eine Sprechblase.
Dieses Beispiel zeigt, wie man am unteren Rand der QuickInfo einen Pfeil hinzufügt:
.tooltip-local .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 :
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Top Tooltip w/ Bottom Arrow</h2>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Positionieren Sie den Pfeil innerhalb des Tooltips: top: 100%
platziert den Pfeil an der Stelle unten im Tooltip. links: 50 %
zentriert den Pfeil.
Hinweis: Die Eigenschaft border-width
gibt die Größe des an Pfeil. Wenn Sie dies ändern, ändern Sie auch den Wert für margin-left
auf denselben Wert. Das hält den Pfeil zentriert.
Die border-color
wird verwendet, um den Inhalt in einen Pfeil umzuwandeln. Wir stellen das ein Oberer Rand auf Schwarz und der Rest auf Transparent. Wenn alle Seiten schwarz wären, du würde am Ende ein schwarzes quadratisches Kästchen ergeben.
In diesem Beispiel wird gezeigt, wie Sie oben im Tooltip einen Pfeil hinzufügen. Beachten Sie, dass wir dieses Mal die Farbe des unteren Randes festlegen:
.tooltip-local .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 :
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Bottom Tooltip w/ Top Arrow</h2>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Dieses Beispiel zeigt, wie Sie links neben der QuickInfo einen Pfeil hinzufügen:
.tooltip-local .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 :
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 110%;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Right Tooltip w/ Left Arrow</h2>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Dieses Beispiel zeigt, wie Sie rechts neben der QuickInfo einen Pfeil hinzufügen:
.tooltip-local .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 :
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
right: 110%;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Left Tooltip w/ Right Arrow</h2>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Wenn Sie den Tooltip-Text einblenden möchten, sobald er sichtbar ist, können Sie dies tun kann die CSS-Eigenschaft transition
zusammen mit der Opacity
verwenden Eigenschaft und wechselt innerhalb einer bestimmten Anzahl von Sekunden von völlig unsichtbar zu 100 % sichtbar (1 Sekunde in unserem Beispiel):
.tooltip-local .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip-local:hover
.tooltiptext {
opacity: 1;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<body style="text-align:center;">
<h2>Fade In Tooltip on Hover</h2>
<p>When you move the mouse over the text below, the tooltip text will fade in and take 1 second to go from completely invisible to visible.</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>