Die Popover API: native Popups, Menüs und Tooltips ohne Bibliothek

Die Popover API ist die eingebaute Antwort des Browsers auf ein Problem, das jeder Entwickler schon hundertmal von Hand gelöst hat: ein kleines Stück UI - ein Menü, einen Tooltip, eine Karte, eine Benachrichtigung - über allem anderen anzuzeigen und wieder sauber zu schließen. Mit dem Attribut popover und einer winzigen JavaScript-Schnittstelle bekommst du Top-Layer, Light-Dismiss und Esc-Handling gratis, ganz ohne Bibliothek. So funktioniert es.

Das einfachste Popover

Jedes Element wird durch Hinzufügen des Attributs popover zu einem Popover. Ein Button öffnet es mit popovertarget, das auf die id des Popovers zeigt:

<button popovertarget="menu">Open menu</button>

<div id="menu" popover>
  <p>I am a popover. Click outside or press Esc to close me.</p>
</div>

Das ist alles. Kein Klick-Handler, kein z-index, kein Außenklick-Listener. Der Browser rendert das Popover im Top-Layer (über der gesamten Seite, ohne z-index-Kämpfe) und schließt es bei Esc oder einem Klick außerhalb.

auto vs manual

Es gibt zwei Arten von Popover, und der Unterschied ist: wer schließt sie?

<!-- auto: light-dismiss, only one open in a stack -->
<div id="tip" popover="auto">...</div>

<!-- manual: you open and close it yourself -->
<div id="toast" popover="manual">...</div>

Ein auto-Popover unterstützt Light-Dismiss: Esc oder ein Klick außerhalb schließt es, und ein neues zu öffnen schließt das vorherige im selben Stapel. Ein manual-Popover ignoriert all das und bleibt offen, bis dein Code es verbirgt - die richtige Wahl für einen Toast oder ein dauerhaftes Panel.

Steuerung per JavaScript

Wenn du ein Popover im Code öffnen oder schließen musst, erledigen das drei Methoden, plus ein toggle-Ereignis, um auf Zustandsänderungen zu reagieren:

const menu = document.getElementById("menu");
menu.showPopover();     // open it
menu.hidePopover();     // close it
menu.togglePopover();   // flip it

menu.addEventListener("toggle", (e) => {
  console.log(e.newState); // "open" or "closed"
});

Es gibt außerdem ein beforetoggle-Ereignis, das kurz vor der Zustandsänderung feuert - praktisch, um Inhalte verzögert zu laden oder eine Eingangsanimation zu starten.

Styling und Positionierung

Style ein Popover, während es offen ist, mit der Pseudoklasse :popover-open, und die abgedunkelte Ebene hinter einem auto-Popover mit ::backdrop:

[popover]:popover-open {
  /* styles while the popover is shown */
}

[popover]::backdrop {
  /* the layer behind an auto popover */
  background: rgb(0 0 0 / 0.3);
}

Um ein Popover neben dem Button zu platzieren, der es geöffnet hat - wie ein echtes Dropdown-Menü - kombiniere es mit CSS Anchor Positioning (anchor()), statt Koordinaten in JavaScript zu messen. Die beiden Funktionen sind dafür gedacht, zusammenzuarbeiten.

Wann man sie nutzt (und wann nicht)

Greife für vorübergehende Overlay-UI zur Popover API: Dropdown-Menüs, Tooltips, Kontexthinweise, kleine Karten und Benachrichtigungen. Für einen blockierenden modalen Dialog, der den Fokus einfangen und die Interaktion mit der Seite stoppen soll, ist das <dialog>-Element weiterhin das bessere Werkzeug. Betrachte sie als Ergänzung: Popovers für leichte Overlays, Dialoge für echte Modals.

Das Fazit

Die Popover API verwandelt einen Haufen handgeschriebenes JavaScript - Top-Layer-Rendering, Außenklick-Erkennung, Esc-Handling, Fokus-Jonglage - in ein einziges HTML-Attribut plus drei Methoden. Nutze auto für Menüs und Tooltips, manual für UI, die du steuerst, style mit :popover-open und kombiniere sie mit Anchor Positioning für echte Dropdowns. Sie wird heute von modernen Browsern unterstützt, sodass die meisten Seiten sie ohne Polyfill einsetzen können.