Startseite >Web >HTML-Referenz – Elemente und Attribute >popover – Popover (Attribut)

popover – Popover (Attribut)

<button popovertarget="help">?</button><div id="help" popover>…</div>

Aufklappender Inhalt: ein Dropdown-Menü, eine Hilfe, eine Benachrichtigung, eine Auswahl. Ein Element mit popover ist ausgeblendet; eine Schaltfläche mit popovertarget öffnet und schließt es. Offen liegt das Element im top layer über der ganzen Seite und mit dem Wert auto schließt es sich mit der Esc-Taste oder einem Klick außerhalb – alles ohne Skript.

Werte

  • auto (oder ein leerer Wert) – schließt sich mit der Esc-Taste, einem Klick außerhalb und beim Öffnen eines anderen auto-Popovers.
  • manual – schließt sich nur mit einer Schaltfläche oder per Skript (Benachrichtigungen, die bleiben sollen).
  • hint – eine Hilfe, die ein offenes auto-Popover nicht schließt. Chrome seit 151, Firefox seit 153, Safari noch nicht (Stand: Oktober 2026).
  • Gilt für: alle Elemente (die Steuerung: ein button mit popovertarget, wahlweise popovertargetaction show, hide, toggle)
  • In JavaScript: element.popover, showPopover(), hidePopover(), togglePopover()

Beispiele

Eine Hilfe zu einem Feld, geöffnet mit einer Schaltfläche:

<label for="p-zip">Postleitzahl</label>
<input id="p-zip" name="zip" inputmode="numeric">
<button type="button" popovertarget="p-help" aria-label="Hilfe zur Postleitzahl">?</button>
<div id="p-help" popover>
  <p>Fünf Ziffern, zum Beispiel 10115.</p>
</div>

Das Aussehen eines offenen Popovers – :popover-open und ein durchscheinender Hintergrund:

<div id="box" popover>…</div>

[popover] {
  padding: 12px 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
}
[popover]::backdrop {
  background: rgb(0 0 0 / 0.1);
}

Barrierefreiheit

Der Browser gibt einer Schaltfläche mit popovertarget den Zustand aufgeklappt (aria-expanded) und nach dem Schließen des Popovers kehrt der Fokus zu ihr zurück. Das Popover selbst hat keine Rolle – geben Sie ihm eine passend zum Inhalt (role="menu" nur für ein echtes Menü mit Befehlen, sonst eventuell keine).

Worauf Sie achten sollten

  • Standardmäßig steht das Popover in der Mitte des Bildschirms (inset: 0; margin: auto). An die Schaltfläche heftet man es mit CSS Anchor Positioning (position-anchor), das noch nicht alle Browser unterstützen.
  • Ein Element mit popover wird mit display: none ausgeblendet – eine Regel mit display am selben Element zeigt es dauerhaft an. Setzen Sie die Darstellung nur bei :popover-open.
  • Für ein Fenster, das den Rest der Seite sperren soll (Bestätigen eines Löschvorgangs), verwenden Sie dialog mit showModal().

Browserunterstützung

Baseline – neu verfügbar: in allen gängigen Browsern seit April 2024; ältere Browserversionen unterstützen es nicht. Ab Version: Chrome 114, Firefox 125, Safari 17. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
dialog – Dialogfenster
button – Schaltfläche
details – Aufklappbereich
aria-* – Barrierefreiheitsattribute