CSS Popover API — native Dropdowns und Overlays ohne JavaScript

5. popover="auto" vs. popover="manual"

Die CSS Popover API kennt zwei Verhaltensmodi. popover="auto" ist der Standardmodus mit Light-Dismiss-Verhalten: Ein Klick außerhalb des Popovers schließt es automatisch. Außerdem kann bei popover="auto" immer nur ein Popover gleichzeitig geöffnet sein – öffnet man ein zweites, schließt das erste automatisch. Das ist das erwartete Verhalten für Dropdown-Menüs und Tooltips. popover="manual" hingegen hat kein Light-Dismiss und kein automatisches Schließen anderer Popovers. Es muss programmatisch über JavaScript oder einen expliziten Schließen-Button gesteuert werden.

Für die meisten UI-Muster ist popover="auto" die richtige Wahl. popover="manual" eignet sich für Szenarien, in denen mehrere Popovers gleichzeitig sichtbar sein sollen – beispielsweise ein Notification-Stack oder mehrere unabhängige Tooltips in einem komplexen Dashboard. Der Unterschied im Verhalten ähnelt dem zwischen einem nicht-modalen dialog und einem modalen Dialog. Die Popover API deckt damit beide Anwendungsfälle ab.

6. Tooltip-Pattern mit der Popover API

Tooltips sind einer der häufigsten Anwendungsfälle für die CSS Popover API. Mit CSS Anchor Positioning, das parallel zur Popover API eingeführt wurde, kann ein Tooltip präzise relativ zu seinem Trigger-Element positioniert werden – ohne JavaScript-Positionierungslogik. Das Tooltip-Element erhält popover="hint" (oder popover="auto") und wird über position-anchor mit dem Trigger verknüpft. Der Browser berechnet die optimale Position automatisch und kann mit position-try-fallbacks alternative Positionen ausprobieren, wenn der bevorzugte Platz nicht ausreicht.

Ein häufiges Problem bei Tooltip-Implementierungen ist die Interaktion mit Tastaturnavigation. Traditionell wurden Tooltips über :hover und :focus mit CSS gesteuert, was zu Problemen führte, wenn der Inhalt selbst fokussierbar sein sollte. Mit der Popover API entfällt dieses Problem: Der Browser verwaltet den Fokus korrekt, und Tastaturnutzer können das Popover wie erwartet öffnen und mit Escape schließen.

/* Tooltip positioning with CSS Anchor Positioning */
.tooltip-trigger {
  anchor-name: --tooltip-anchor;
  position: relative;
  cursor: help;
  border-bottom: 1px dashed #7c3aed;
  text-decoration: none;
  color: inherit;
}

[popover].tooltip {
  /* Anchor this popover to the trigger */
  position-anchor: --tooltip-anchor;
  position: absolute;

  /* Default: appear above the trigger */
  bottom: calc(anchor(top) + 8px);
  left: anchor(center);
  translate: -50% 0;

  /* Fallback positions if space is limited */
  position-try-fallbacks:
    --below,
    --left,
    --right;

  /* Tooltip visual style */
  background: #1e1b4b;
  color: #ede9fe;
  padding: 0.4rem 0.8rem;
  border-radius: 0.4rem;
  font-size: 0.8rem;
  max-width: 240px;
  white-space: normal;
  pointer-events: none;
}

/* Fallback: below the trigger */
@position-try --below {
  top: calc(anchor(bottom) + 8px);
  bottom: auto;
}

/* Fade-in animation */
@starting-style {
  [popover].tooltip:popover-open {
    opacity: 0;
    scale: 0.92;
  }
}

[popover].tooltip {
  transition: opacity 0.15s ease, scale 0.15s ease;
  opacity: 0;
  scale: 1;
}

[popover].tooltip:popover-open {
  opacity: 1;
  scale: 1;
}

7. Navigations-Dropdown mit popover

Navigations-Dropdowns sind der zweite klassische Anwendungsfall für die Popover API. Ein Navigationsmenü mit mehreren Ebenen kann vollständig ohne JavaScript implementiert werden, solange die Anforderungen dem nativen Verhalten entsprechen: Öffnen per Klick, automatisches Schließen bei Klick außerhalb, Schließen per Escape. Für Hover-Dropdowns ist die Popover API allein nicht ausreichend – hier ist nach wie vor JavaScript oder zumindest eine :hover-basierte CSS-Lösung notwendig, da das native popover-Attribut keinen Hover-Trigger unterstützt.

Ein praktisches Muster für Navigations-Dropdowns kombiniert die Popover API mit popover="auto" und CSS Anchor Positioning. Der Trigger-Button öffnet das Dropdown, das sich direkt unter dem Button positioniert. Da popover="auto" immer nur ein Dropdown gleichzeitig offenlässt, funktioniert das Öffnen eines neuen Dropdowns als automatisches Schließen des vorherigen – genau das erwartete Verhalten für Haupt-Navigationsleisten.

8. Einblend-Animationen mit @starting-style

Eine der bisherigen Einschränkungen von CSS-Transitions war, dass sie nur bei Zustandswechseln von bereits gerenderten Elementen funktionierten. Das initiale Erscheinen eines Elements – beispielsweise wenn ein Popover von display: none zu display: block wechselt – konnte nicht mit CSS allein animiert werden. Die @starting-style-Regel löst dieses Problem. Sie definiert den CSS-Ausgangszustand für einen Entry-Transition: Wenn ein Element zum ersten Mal sichtbar wird, startet der Browser eine Transition vom @starting-style-Zustand zum Normalzustand.

Für die CSS Popover API ist @starting-style deshalb besonders relevant, weil Popovers beim Öffnen von unsichtbar zu sichtbar wechseln. Ohne @starting-style würden Transitions beim Öffnen nicht funktionieren – nur beim Schließen. Mit @starting-style kann man sowohl Entry- als auch Exit-Transitions definieren, was zu einem vollständig animierten Öffnen und Schließen führt. Das allow-discrete-Schlüsselwort in der transition-Eigenschaft ist dabei notwendig, wenn display oder visibility Teil der Transition sind.

/* Full open/close animation for popover using @starting-style */
[popover].menu {
  /* These properties will be transitioned */
  transition:
    opacity 0.22s ease,
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    display 0.22s allow-discrete,
    overlay 0.22s allow-discrete;

  /* Closed state */
  opacity: 0;
  transform: translateY(-10px) scale(0.96);
}

/* Open state */
[popover].menu:popover-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Entry: where the animation starts FROM when opening */
@starting-style {
  [popover].menu:popover-open {
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
  }
}

/* Staggered children animation */
[popover].menu li {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

[popover].menu:popover-open li {
  opacity: 1;
  transform: translateX(0);
}

[popover].menu:popover-open li:nth-child(1) { transition-delay: 0.04s; }
[popover].menu:popover-open li:nth-child(2) { transition-delay: 0.08s; }
[popover].menu:popover-open li:nth-child(3) { transition-delay: 0.12s; }

9. Popover API im direkten Vergleich

Die CSS Popover API ist nicht das einzige native Browser-Feature für überlagernde UI-Elemente. Der Vergleich mit <dialog>, details/summary und reinen CSS-Lösungen zeigt die Stärken und Grenzen jedes Ansatzes.

Der entscheidende Vorteil der Popover API gegenüber <dialog> ist das Light-Dismiss-Verhalten ohne JavaScript. Für Dropdowns und Tooltips ist das die natürlichere Lösung. Der Vorteil gegenüber details/summary liegt im Top Layer: Popover-Elemente können über andere Elemente hinaus ragen und werden nicht durch overflow: hidden auf Elternelementen abgeschnitten – das war eines der häufigsten Probleme bei Dropdown-Implementierungen.

10. Zusammenfassung

Die CSS Popover API ist ein fundamentaler Schritt vorwärts für das Web-Frontend. Mit dem nativen popover-Attribut, ::backdrop, der Pseudoklasse :popover-open und der Integration mit CSS Anchor Positioning können Dropdowns, Tooltips und Overlays vollständig ohne JavaScript implementiert werden. Der Browser übernimmt Top-Layer-Rendering, Light-Dismiss-Verhalten, Escape-Handling und Fokusmanagement – alles Aufgaben, die bisher JavaScript-Bibliotheken erforderten.

Die Unterscheidung zwischen popover="auto" und popover="manual" deckt die beiden häufigsten Anwendungsfälle ab: Dropdowns und Tooltips mit automatischem Schließen einerseits, komplexe UI-Muster mit mehreren gleichzeitigen Popovers andererseits. Mit @starting-style und allow-discrete sind auch vollständig animierte Öffnen- und Schließen-Transitions möglich. Die CSS Popover API ist heute in allen modernen Browsern verfügbar und kann mit einem einfachen Feature-Check progressiv eingesetzt werden.

11. FAQ: CSS Popover API