Tooltips ohne JavaScript – CSS Anchor Positioning

Ein Tooltip neben einem Button zu platzieren klingt nach einer Aufgabe für fünf Minuten. In Wirklichkeit ist es die Aufgabe, an der ich früher regelmäßig eine Bibliothek eingebunden habe. Denn der klassische Weg – position: absolute im Elternelement – hat zwei Probleme, die immer erst später auftauchen: Steht der Button in einem Container mit overflow: hidden, wird das Tooltip abgeschnitten. Und steht er ganz oben am Bildschirmrand, ragt das Tooltip aus dem sichtbaren Bereich.

Genau dafür gibt es jetzt CSS Anchor Positioning. Und es löst beides.

Der Anker bekommt einen Namen

Zwei Eigenschaften, mehr ist der Kern nicht: Das Bezugselement bekommt mit anchor-name einen Namen, das schwebende Element verweist mit position-anchor darauf.

<button class="hilfe-knopf" aria-describedby="tipp">?</button>
<div class="hilfe-tipp" id="tipp" role="tooltip">
  Deine Rechnungsnummer steht oben rechts auf dem PDF.
</div>

.hilfe-knopf {
  anchor-name: --hilfe;          /* Namen vergeben, immer mit -- davor */
}

.hilfe-tipp {
  position: fixed;               /* wichtig – dazu gleich mehr */
  position-anchor: --hilfe;
  position-area: block-start center;   /* mittig über dem Knopf */
  margin-block-end: 8px;               /* etwas Luft dazwischen */
}

position-area beschreibt die Lage in Worten statt in Pixeln: Der Anker spannt ein Drei-mal-drei-Raster auf, und du sagst, in welche Zelle das Element soll. block-start center heißt „darüber, mittig", inline-end center heißt „rechts daneben". Keine Koordinaten, kein translate(-50%, …).

Warum position: fixed hier der Punkt ist

Das ist die Eigenschaft, die den alten Trick ablöst. Ein Element mit Anker-Positionierung braucht kein positioniertes Elternelement mehr. Es wird gegenüber dem Viewport ausgerichtet und nur die *Position* vom Anker abgeleitet.

Damit ist das Tooltip aus der Elternbox raus: overflow: hidden an einer Karte, einer Tabelle oder einem Scroll-Container schneidet es nicht mehr ab. Beim Scrollen wandert es trotzdem mit dem Button mit – der Browser hält beide zusammen.

Ausweichen, wenn kein Platz ist

Der zweite Teil, für den man früher JavaScript brauchte: Wenn oben nicht genug Raum ist, soll das Tooltip nach unten klappen. Das ist eine Zeile.

.hilfe-tipp {
  /* … wie oben … */
  position-try-fallbacks: flip-block;
}

flip-block heißt: „Läuft es über, spiegle die Position an der Blockachse." Es gibt auch flip-inline (links ↔ rechts) und flip-start (über Eck). Mehrere darfst du hintereinander schreiben, der Browser nimmt die erste Variante, die passt:

position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;

Reichen die fertigen Regeln nicht, definierst du eine eigene:

@position-try --rechts-daneben {
  position-area: inline-end center;
  margin: 0 0 0 8px;
  max-width: 16rem;
}

.hilfe-tipp {
  position-try-fallbacks: flip-block, --rechts-daneben;
}

Genauso breit wie der Anker

Für Dropdowns unter einem Eingabefeld ist anchor-size() praktisch – damit übernimmt die Liste die Breite des Feldes, ohne dass du sie irgendwo doppelt pflegst:

.vorschlagsliste {
  position: fixed;
  position-anchor: --suchfeld;
  position-area: block-end span-inline-end;
  min-width: anchor-size(width);
  max-height: 40vh;
  overflow-y: auto;
}

Browser und Rückfallebene

Seit Firefox 147 (Januar 2026) unterstützen es alle drei Engines: Chrome und Edge ab 125, Firefox ab 147, Safari ab 26 – auch auf dem iPhone. Laut caniuse.com sind das rund 82 Prozent des weltweiten Traffics.

Die restlichen Prozent darfst du nicht ignorieren, denn hier bricht ohne Fallback wirklich etwas: Ein position: fixed ohne funktionierenden Anker landet in der linken oberen Bildschirmecke. Also abfragen:

@supports not (anchor-name: --x) {
  .hilfe-knopf { position: relative; }

  .hilfe-tipp {
    position: absolute;
    inset-block-end: 100%;
    inset-inline-start: 50%;
    translate: -50% -8px;
  }
}

Das ist der altbekannte Weg – mit allen Nachteilen, aber eben nur noch für die Minderheit. Wichtig: Das Tooltip muss dafür im Markup innerhalb des Knopf-Containers liegen, sonst greift die Rückfallebene ins Leere.

Ein Hinweis zum Schluss

Wenn dein schwebendes Element wirklich ein Overlay ist – Menü, Popover, Bestätigungsblase –, kombiniere das Ganze mit dem nativen popover-Attribut. Dann liegt es in der Top-Layer, schließt sich mit Escape und einem Klick daneben, und du brauchst für den gesamten Vorgang immer noch kein JavaScript.

Ich habe damit in meinen Projekten eine Abhängigkeit weniger im Bündel. Und weniger Code, den ich in zwei Jahren aktualisieren muss, ist mir am Ende mehr wert als jede clevere Bibliothek. Wenn du eine Website willst, die mit möglichst wenig Ballast auskommt: Schreib mir auf bymw.de.

Quellen

• CSS anchor positioning verwenden (MDN Web Docs)
• CSS Anchor Positioning – Browser-Unterstützung (caniuse.com)