CSS-Tooltips

Einfache, stilvolle Tooltips mit reinem CSS, die bei Hover angezeigt werden.

Demo

Code

HTML
CSS
JavaScript
<div class="tooltip-container">
  <button class="tooltip-trigger">Hover für Tooltip
    <span class="tooltip">Dies ist ein Tooltip-Text!</span>
  </button>
</div>
.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-trigger {
  position: relative;
  padding: 10px 15px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.tooltip {
  visibility: hidden;
  width: 120px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%; /* Position oberhalb des Elements */
  left: 50%;
  margin-left: -60px; /* Hälfte der Breite */
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 14px;
}

/* Pfeil für den Tooltip */
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

/* Tooltip anzeigen bei Hover */
.tooltip-trigger:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

Erklärung

Diese Tooltips werden vollständig mit CSS erstellt, ohne JavaScript:

  • Der Tooltip ist ein span-Element innerhalb des Elements, das den Tooltip auslöst
  • Standardmäßig ist der Tooltip unsichtbar (visibility: hidden) und transparent (opacity: 0)
  • Beim Hover über das Elternelement wird der Tooltip sichtbar gemacht
  • Der Pfeil wird mit einem Pseudo-Element (::after) und Grenzdreiecken erstellt
  • Die Transition sorgt für ein sanftes Ein- und Ausblenden

Du kannst die Position des Tooltips anpassen, indem du die Eigenschaften bottom, top, left oder right änderst, um ihn oberhalb, unterhalb, links oder rechts vom Auslöseelement anzuzeigen.

Verwendung

Nutze diese Tooltips, um zusätzliche Informationen zu Buttons, Icons oder anderen interaktiven Elementen bereitzustellen, ohne dass der Benutzer auf eine andere Seite navigieren muss.