HTML Popover API: popovertarget, showPopover, Events | We.Inc
Teste die Popover API live: auto-, manual- und hint-Popover, popovertarget-Buttons, showPopover, hidePopover und togglePopover, dazu ein Log der Events beforetoggle und toggle.
Füge einem beliebigen Element das Attribut popover hinzu und verknüpfe einen Button über popovertarget="id" damit, dann übernimmt der Browser Öffnen, Schließen, den Top Layer und die Escape-Taste für dich, ganz ohne JavaScript. In Skripten rufst du showPopover(), hidePopover() oder togglePopover() auf und lauschst auf die Events beforetoggle und toggle. popover="auto" schließt sich bei einem Klick außerhalb, manual nicht.
Popover-Typen
Wert
Schließt bei Klick außerhalb oder Escape
Andere Popover
popover oder popover="auto"
Ja
Beim Öffnen schließen sich andere auto-Popover, außer seinen Vorfahren
popover="manual"
Nein, du schließt es selbst
Beliebig viele können gleichzeitig offen sein
popover="hint"
Ja
Schließt andere hint-Popover, die nicht seine Vorfahren sind; gedacht für Tooltips
Popover bedeuteten früher eine Positionierungsbibliothek, einen Handler für Klicks außerhalb und einen Kampf mit dem z-index. Die Popover API verlagert all das in HTML. Der Playground unten erzeugt in deinem Browser ein echtes Popover, sodass du seinen Typ wechseln, es per Code steuern und die Events der Reihe nach feuern sehen kannst.
Wähle im Playground auto, manual oder hint für das Popover.
Öffne es mit dem deklarativen Button oder rufe die drei Methoden über die Skript-Buttons auf.
Klicke außerhalb oder drücke Escape, um zu sehen, welche Typen sich von selbst schließen.
Lies das Event-Log: Zuerst feuert beforetoggle, dann toggle, jeweils mit oldState und newState.
Nur button- und input-Elemente können popovertarget tragen. Verwende einen echten Button, damit Tastaturnutzer ihn erreichen.
popovertargetaction akzeptiert toggle (Standard), show oder hide, daher brauchen getrennte Öffnen- und Schließen-Buttons kein Skript.
Gestalte den geöffneten Zustand mit :popover-open und dunkle die Seite dahinter mit ::backdrop ab.
Ein Popover ist nicht modal. Für ein Formular, das ausgefüllt sein muss, bevor es zurück zur Seite geht, verwende einen dialog, der mit showModal() geöffnet wird.
Angezeigte Popover liegen im Top Layer, daher brauchst du keinen hohen z-index mehr, um sie über allem anderen zu halten.
Häufige Fragen
Welche Browser unterstützen die Popover API?
MDN führt die Popover API seit Januar 2025 als Baseline newly available, sie funktioniert also in den aktuellen Versionen der großen Browser. Einige neuere Teile, etwa der Wert hint, werden möglicherweise weniger breit unterstützt, prüfe daher die Kompatibilitätstabelle, bevor du dich darauf verlässt.
Was ist der Unterschied zwischen auto- und manual-Popovern?
Ein auto-Popover unterstützt Light Dismiss: Ein Klick außerhalb oder Escape schließt es, und sein Öffnen schließt andere auto-Popover. Ein manual-Popover bleibt offen, bis ein Button oder ein Skript es schließt, und mehrere können gleichzeitig offen sein, was gut zu Toasts passt.
Schließt Escape jedes Popover?
Escape schließt auto- und hint-Popover, also dieselben, die sich bei einem Klick außerhalb schließen. Ein manual-Popover ignoriert beides und braucht daher einen eigenen Schließen-Button oder einen Aufruf von hidePopover().
Wie erfahre ich, wann sich ein Popover öffnet oder schließt?
Lausche auf das toggle-Event am Popover-Element. Sein newState ist "open" oder "closed". Das Event beforetoggle feuert kurz vor der Änderung und ist der richtige Ort, um Inhalte vorzubereiten.
Wo erscheint ein Popover standardmäßig?
In der Mitte des Viewports, mit fester Positionierung, im Top Layer. Verschiebe es mit eigenem CSS oder mit Anchor Positioning, sofern der Browser das unterstützt.
Zuerst deklarativ
Die meisten Popover brauchen überhaupt kein Skript. Button und Popover sind über die id verknüpft, und der Browser kümmert sich um das Umschalten, Light Dismiss und die Escape-Taste.
Greife zu showPopover() und seinen Geschwistern, wenn der Auslöser kein Button ist, etwa um nach einer fehlgeschlagenen Formularprüfung einen Hinweis zu öffnen oder einen Toast per Timer zu schließen.
Menüs, Toasts und Tipps
auto passt zu Menüs und Auswahlfeldern, die verschwinden sollen, sobald die Aufmerksamkeit woanders hingeht. manual passt zu Benachrichtigungen, die sich stapeln und bleiben, bis man sie wegklickt. hint zielt auf Tooltips bei Hover und Fokus.
Egal welcher Typ: Halte den Inhalt kurz und stelle sicher, dass jede Aktion darin auch per Tastatur erreichbar ist.
Referenz der Popover API
Attribute, Methoden, Events und Selektoren
Name
Art
Was es tut
Globales Attribut
Macht das Element zu einem Popover: auto, manual oder hint
Attribut an button oder input
Id des Popovers, das das Steuerelement öffnet und schließt
Attribut an button oder input
toggle (Standard), show oder hide
showPopover()
Methode
Fügt das Popover dem Top Layer hinzu
hidePopover()
Methode
Entfernt es aus dem Top Layer und blendet es aus
togglePopover()
Methode
Zeigt es an, wenn es verborgen ist, und blendet es aus, wenn es angezeigt wird
Event
Feuert, bevor sich der Zustand ändert; hat oldState und newState
Event
Feuert, nachdem sich der Zustand geändert hat; hat oldState und newState
:popover-open
CSS-Pseudoklasse
Trifft auf ein Popover zu, solange es angezeigt wird
::backdrop
CSS-Pseudoelement
Die Ebene hinter einem angezeigten Popover
Popover-Beispiele ohne JavaScript
Diese Frames laufen mit deaktivierten Skripten, und die Popover funktionieren trotzdem, weil das Verhalten aus HTML kommt.
Ein Menü als auto-Popover
Klicke auf den Button und dann woanders hin oder drücke Escape. Das Menü schließt sich selbst.
Ein manual-Toast mit getrennten Buttons zum Anzeigen und Ausblenden
Ein Klick außerhalb bewirkt hier nichts. Nur der Ausblenden-Button schließt ihn.
Die Seite hinter einem Popover abdunkeln
::backdrop gestaltet die Ebene unter dem Popover. Es ist trotzdem nicht modal; ein Klick auf die Seite dahinter schließt es.
Ein Popover mit JavaScript steuern
Methoden, Events und Feature Detection
Prüfe die Unterstützung, bevor du die Methoden aufrufst, und lies dann newState im toggle-Event.
Popover-Playground
Dein Browser führt hier ein echtes Popover aus: Wechsle seinen Typ, rufe seine Methoden auf und lies das Event-Log.
Deklarativer Button (popovertarget)
Skript-Methoden
Ich bin ein {v}-Popover. Klicke außerhalb oder drücke Escape, um Light Dismiss zu testen.
Schließen
Zustand: {v}
Event-Log
Log leeren
Noch keine Events.
Dieser Browser unterstützt die Popover API nicht, daher ist der Playground deaktiviert.