Tooltips

Teil des Abschnitts Practical Frontend der HTML-Journey von Coddy — Lektion 23 von 35.

Tooltips sind kleine, informative Pop-up-Elemente, die erscheinen, wenn ein Benutzer den Mauszeiger über ein Oberflächenelement bewegt oder dieses fokussiert. Sie bieten zusätzlichen Kontext, ohne die Haupt-Benutzeroberfläche zu überladen.

Lassen Sie uns einen einfachen Tooltip mit HTML und CSS erstellen:

Erstellen Sie zuerst die HTML-Struktur:

<div class="tooltip-container">
  <button>Hover over me</button>
  <span class="tooltip">This is a tooltip!</span>
</div>

Fügen Sie als Nächstes das CSS hinzu, um den Tooltip zu positionieren und anzuzeigen/auszublenden:

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  visibility: hidden; 
  /* Position the tooltip */
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  
  /* Add a slight delay before showing */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Show the tooltip when hovering over the container */
.tooltip-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

Mit diesem Code erscheint ein Tooltip über der Schaltfläche, wenn Sie mit der Maus darüber fahren.

Aufgabe

Einfach

Du erhältst eine HTML-Schaltfläche mit einem Tooltip, der erscheint, wenn der Benutzer über die "Help" Schaltfläche fährt. Deine Aufgabe:

Verstecke den Tooltip standardmäßig.
Füge eine Hintergrundfarbe und eine Textfarbe hinzu, damit er hervorsticht.
Zentriere den Text innerhalb des Tooltips.
Füge etwas Padding hinzu, damit der Tooltip schöner aussieht.
Runde die Ecken mit border-radius ab.

Spickzettel

Tooltips sind kleine, informative Pop-up-Elemente, die erscheinen, wenn man mit der Maus über Oberflächenelemente fährt.

Grundlegende HTML-Struktur:

<div class="tooltip-container">
  <button>Hover over me</button>
  <span class="tooltip">This is a tooltip!</span>
</div>

CSS für die Positionierung und das Ein-/Ausblenden von Tooltips:

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  visibility: hidden; 
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

Probier es selbst

<!DOCTYPE html>
<html>
<head>
  <title>Tooltips</title>
  <style>
    .tooltip-container {
      position: relative;
      display: inline-block;
      margin: 50px;
    }
    
    button {
      padding: 8px 16px;
      cursor: pointer;
    }
    
    .tooltip {
      
      /* Animation properties */
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    /* Show the tooltip when hovering over the container */
    .tooltip-container:hover .tooltip {
      visibility: visible;
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="tooltip-container">
    <button>Help</button>
    <span class="tooltip">Click for assistance</span>
  </div>
</body>
</html>