Pure CSS-Tooltip

Eine simple und extrem leichtgewichtige Tooltip-Komponente, die komplett auf JavaScript verzichtet und allein mit HTML und CSS auskommt. Beim Hovern (Darüberfahren mit der Maus) blendet sich die Informationsblase sanft ein und wird elegant über dem Zielelement positioniert.

Vorschau

Code

Kopieren Sie den folgenden Code und integrieren Sie ihn in Ihr Projekt.

<!-- index.html -->
<div class="tooltip-wrapper">
  <button class="tooltip-trigger">Hier hovern</button>
  <div class="tooltip-content">
    Dies ist ein purer CSS-Tooltip!
  </div>
</div>

/* styles.css */
.tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.tooltip-trigger {
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  background-color: #3b82f6;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.2s;
}

.tooltip-trigger:hover {
  background-color: #2563eb;
}

.tooltip-content {
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  background-color: #1f2937;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Nach unten zeigendes Dreieck (Pfeil) */
.tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #1f2937 transparent transparent transparent;
}

/* Verhalten beim Hovern */
.tooltip-wrapper:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

Erläuterung

position: relative und position: absolute: Indem dem Elternelement (.tooltip-wrapper) die Eigenschaft position: relative zugewiesen wird, dient es als Referenzpunkt für die absolute Positionierung (absolute) des eigentlichen Tooltips (.tooltip-content).
visibility und opacity: Da die Eigenschaft display: none keine CSS-Transitionen zulässt, wird der unsichtbare Zustand durch die Kombination von visibility: hidden und opacity: 0 realisiert, was eine weiche Einblendung ermöglicht.
Fließende Animation: Durch eine initiale Verschiebung auf der Y-Achse via transform: translateY(10px) und das Zurücksetzen auf translateY(0) beim Hover-Status entsteht eine besonders organische, schwebende Einblend-Animation.
CSS-Dreieck: Mithilfe des Pseudoelements .tooltip-content::after wird ein typischer CSS-Trick (border auf einem Element ohne Breite/Höhe) angewendet, um den charakteristischen nach unten zeigenden Pfeil (das Dreieck) des Tooltips zu zeichnen.