Tooltips

Teil des Abschnitts Praktisches 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 Benutzeroberflächenelement bewegt oder es fokussiert. Sie bieten zusätzlichen Kontext, ohne die Hauptbenutzeroberfläche zu überladen.

Erstellen wir einen einfachen Tooltip mit HTML und CSS:

Erstelle zunächst die HTML-Struktur:

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

Füge als Nächstes das CSS hinzu, um den Tooltip zu positionieren und ein- bzw. auszublenden:

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

.tooltip {
  visibility: hidden; 
  /* Positioniere den Tooltip */
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  
  /* Füge eine leichte Verzögerung vor dem Anzeigen hinzu */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Zeige den Tooltip an, wenn über den Container gehovert wird */
.tooltip-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

Mit diesem Code wird beim Bewegen des Mauszeigers über die Schaltfläche ein Tooltip darüber angezeigt.

Aufgabe

Einfach

Du erhältst eine HTML-Schaltfläche mit einem Tooltip, der angezeigt wird, wenn der Benutzer mit der Maus über die Schaltfläche „Help“ fährt. Deine Aufgabe:

Den Tooltip standardmäßig ausblenden.
Eine Hintergrundfarbe und Textfarbe hinzufügen, damit er besser hervorsticht.
Den Text innerhalb des Tooltips zentrieren.
Etwas Innenabstand hinzufügen, damit der Tooltip ansprechender aussieht.
Die Ecken mit border-radius abrunden.

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>