HTML popover API

Ein natives HTML-Attribut, um Popovers, Menüs, Tooltips oder Infoboxen zu bauen – ganz ohne JavaScript. Öffnen, Schliessen, Klick-ausserhalb-schliesst und ESC-Taste funktionieren automatisch.

Grundsyntax

Zwei Attribute reichen: das anzuzeigende Element bekommt popover, der auslösende Button verweist mit popovertarget auf dessen id.

<button popovertarget="info">Mehr erfahren</button>

<div popover id="info">
    Ich bin ein Popover, komplett ohne JavaScript.
</div>

Beispiel

Kein CSS, kein JavaScript – nur die zwei Attribute oben.

Ich bin ein Popover, komplett ohne JavaScript.

Hinweis: [popover]-Elemente bringen einen eigenen Standard-Rand und eine automatisch zentrierte Position mit. Beides lässt sich jederzeit mit CSS überschreiben.

popovertargetaction

Standardmässig schaltet der Button das Popover um (toggle). Mit popovertargetaction lässt sich das Verhalten festlegen – nützlich für einen eigenen Schliessen-Button innerhalb des Popovers.

  • toggleStandard: öffnet oder schliesst je nach aktuellem Zustand
  • showÖffnet das Popover, tut bei bereits offenem Popover nichts
  • hideSchliesst das Popover
<button popovertarget="info">Öffnen</button>

<div popover id="info">
    Inhalt hier.
    <button popovertarget="info" popovertargetaction="hide">×</button>
</div>

Light-Dismiss

Ein Klick ausserhalb des Popovers oder die ESC-Taste schliessen es automatisch – ganz ohne eigenen Klick-Handler, wie man ihn bei <dialog> selbst schreiben müsste.

popover="auto" (Standardwert, kann auch weggelassen werden) aktiviert dieses Verhalten. Mit popover="manual" lässt es sich abschalten, wenn das Popover explizit über einen eigenen Button geschlossen werden soll:

<div popover="manual" id="info">...</div>

::backdrop

Wie bei <dialog> lässt sich auch bei einem offenen Popover der Hintergrund über ::backdrop stylen – z. B. für eine leichte Abdunkelung.

.popover-demo::backdrop {
    background: rgba(0, 0, 0, 0.3);
}

Kombiniert mit CSS Anchor Positioning

Popovers werden standardmässig zentriert im Viewport angezeigt. Soll sich das Popover stattdessen an seinem auslösenden Button orientieren, kommt CSS Anchor Positioning ins Spiel – die Kombination aus beidem braucht immer noch kein einziges JavaScript.

See the Pen CSS Anchor Positioning by Intensivstation (@intensivstation) on CodePen.

Im Beispiel wird anchor-name auf dem Button definiert. Das Popover stellt mit position-anchor die Verbindung her und richtet sich mit anchor() an dessen Kanten aus – Details dazu auf der Anchor-Positioning-Seite.

popover vs. dialog – was wann?

  • <dialog>Modals, Bestätigungsfenster – blockiert bewusst die Seite, braucht showModal()/show()
  • popoverMenüs, Tooltips, Infoboxen – Light-Dismiss automatisch, kein JavaScript nötig

Siehe auch: HTML <dialog> – Modal.

Kurz gesagt

  • popover auf dem anzuzeigenden Element, popovertarget auf dem Button – mehr braucht es nicht
  • Klick ausserhalb oder ESC schliesst automatisch (popover="auto", Standard)
  • popover="manual" deaktiviert das automatische Schliessen
  • popovertargetaction steuert gezielt show/hide/toggle
  • ::backdrop stylet den Hintergrund, genau wie bei <dialog>
  • Kombinierbar mit CSS Anchor Positioning für Ausrichtung am Trigger