CSS-Tooltip


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Erstellen Sie Tooltips mit CSS.


Demo: Tooltip-Beispiele

Ein Tooltip wird häufig verwendet, um zusätzliche Informationen zu etwas anzugeben, wenn der Benutzer den Mauszeiger über ein Element bewegt:

Top Tooltip text
Right Tooltip text
Bottom Tooltip text
Left Tooltip text


Grundlegender Tooltip

Erstellen Sie einen Tooltip, der angezeigt wird, wenn der Benutzer die Maus über ein Element bewegt:

Beispiel

<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>


Beispiel erklärt

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".



Positionierungs-Tooltips

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.

Richtiger Tooltip

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

Ergebnis :

Hover over me Tooltip text

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>


Linker Tooltip

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

Ergebnis :

Hover over me Tooltip text

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).

Top-Tooltip

.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 :

Hover over me Tooltip text

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>


Unterer Tooltip

.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 :

Hover over me Tooltip text

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>



Tooltip-Pfeile

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:

Unterer Pfeil

.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 :

Hover over me Tooltip text

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>


Beispiel erklärt

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:

Oberer Pfeil

.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 :

Hover over me Tooltip text

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:

Linker Pfeil

.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 :

Hover over me Tooltip text

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:

Rechter Pfeil

.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 :

Hover over me Tooltip text

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>



Einblenden von Tooltips (Animation)

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):

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>