Die Popover API

Die Popover API bietet HTML eine native Möglichkeit, Popovers, Dialoge, Tooltips und Menüs zu erstellen – ohne manuelles JavaScript für Positionierung, Fokusverwaltung, Light-Dismiss oder das Schließen per Escape. Das integrierte Verhalten entspricht den Erwartungen der Benutzer.

Fügen Sie einem beliebigen Element popover hinzu, um es zu einem Popover zu machen. Standardmäßig ist es verborgen. Ein Auslöser-Button mit popovertarget="popover-id" zeigt es beim Klicken an. Der Browser verwaltet den geöffneten bzw. geschlossenen Zustand automatisch.

popover="auto" (Standard) – wird bei einem Klick außerhalb oder bei Escape durch Light-Dismiss geschlossen; gleichzeitig kann nur ein automatisches Popover geöffnet sein. popover="manual" – wird nicht automatisch geschlossen, sondern muss ausdrücklich über JS oder einen anderen Auslöser geschlossen werden.

Das Attribut popovertarget verknüpft einen Button anhand der ID mit einem Popover. Der Browser übernimmt das Umschaltverhalten: Klicken Sie auf den Button, um das Popover anzuzeigen, und erneut oder außerhalb, um es zu schließen. Für die grundlegende Verwendung sind keine Event-Handler erforderlich.

Popovers werden in der Top Layer gerendert – oberhalb aller anderen Inhalte, unabhängig von z-index oder dem Stacking Context. Dadurch entfällt der klassische Fehler, dass ein Modal hinter einem übergeordneten Element mit overflow:hidden verborgen bleibt und der bei selbst implementierten Popovers häufig auftritt.

JavaScript kann Popovers anzeigen oder ausblenden: element.showPopover(), element.hidePopover(), element.togglePopover(). Die Semantik entspricht der des deklarativen Auslösers – Light-Dismiss funktioniert im auto-Modus weiterhin.

Popovers lösen ein toggle-Event aus, wenn sich ihr Zustand ändert. Der Wert newState des Events ist "open" oder "closed". Das ist nützlich für Analytics, Fokusverwaltung oder um andere UI-Elemente mit dem geöffneten Zustand des Popovers zu koordinieren.

Die Pseudoklasse :popover-open trifft auf Popovers in geöffnetem Zustand zu. Verwenden Sie diesen Zustand für Styles von Übergängen, Transparenz und Transformationen: [popover]:popover-open { opacity: 1; transform: none; }.

In Kombination mit der CSS Anchor Positioning API können Popovers automatisch relativ zu ihrem Auslöser positioniert werden – für das klassische Muster „Tooltip neben dem Button“ ist kein JavaScript erforderlich. Beide Funktionen gehören zur selben Entwicklung moderner UI-Primitiven.

Der Browser übernimmt bei modalen Popovers die Fokuseinschränkung, stellt beim Schließen den Fokus auf dem Auslöser wieder her und teilt Screenreadern den geöffneten Zustand des Popovers mit. Eine manuelle Umsetzung erfordert umfangreiches ARIA-Boilerplate; die Popover API liefert dies ohne zusätzlichen Aufwand.

Chrome und Safari unterstützen die Popover API; Firefox hat die Unterstützung später hinzugefügt. Für eine breitere Kompatibilität gibt es einen kleinen Polyfill. Neue Projekte können die native Funktion ausliefern und ältere Browser schrittweise erweitern.

Viele JS-Modal-Bibliotheken (sweetalert, react-modal) existieren hauptsächlich, um zu umgehen, was die Popover API inzwischen nativ leistet. Planen Sie die Migration: kleinere Bundles, bessere Standardeinstellungen und weniger zu wartender Code. Die Popover API ist eine der größten Verbesserungen an HTML seit Jahren.

Was bewirkt popover="auto", das popover="manual" nicht bewirkt?

Die Popover API ergänzt HTML um das Attribut popover sowie showPopover/hidePopover/togglePopover in JS, die Verknüpfung von Auslösern über popovertarget, das Rendering in der Top Layer oberhalb aller Stacking Contexts, die Pseudoklasse :popover-open und toggle-Events. Der auto-Modus wird per Light-Dismiss geschlossen; der manual-Modus muss ausdrücklich gesteuert werden. Damit ersetzt die API die meisten eigenen Modal- und Tooltip-Bibliotheken durch ein einziges HTML-Primitive, das Barrierefreiheit, Fokus und z-index korrekt handhabt.