Native Interaktion: das popover-Attribut

Ein Popover: ganz ohne JavaScript, ganz ohne z-index

Jedes HTML-Element kann mit dem popover-Attribut zu einem Popover werden - einem Element, das über allem anderen schwebt, ohne dass ihr euch um z-index oder position kümmern müsst:

<button popovertarget="menu">Menü öffnen</button>

<div id="menu" popover>
  <p>Ich schwebe über der ganzen Seite!</p>
</div>

• popover auf dem <div> macht es zu einem Popover - standardmäßig unsichtbar
• popovertarget="menu" auf dem <button> verbindet die beiden über die id - ein Klick öffnet/schließt das Popover
• Kein JavaScript, kein z-index, kein eigener Backdrop-Trick nötig

Automatisches Schließen: popover="auto"

<div id="menu" popover="auto">...</div>
<!-- entspricht: <div id="menu" popover>...</div> -->

• auto ist der Standardwert - auch wenn ihr nur popover ohne Wert schreibt
• Ein Klick außerhalb des Popovers schließt es automatisch (“Light Dismiss”), genau wie ein natives Browser-Dropdown
• Die Esc-Taste schließt es ebenfalls automatisch
• Öffnet ihr ein zweites auto-Popover, schließt sich das erste von selbst

Tipp

Genau dieses Verhalten macht popover ideal für Dropdown-Menüs, Tooltips oder ein Options-Menü - alles Dinge, die man früher mit eigenen Klick-außerhalb-Listenern in JavaScript nachbauen musste.

Manuelles Schließen: popover="manual"

<div id="toast" popover="manual">Gespeichert!</div>

• manual schließt sich nicht automatisch bei Klick außerhalb oder Esc
• Ihr steuert das Öffnen/Schließen komplett selbst, z.B. über popovertargetaction oder JavaScript
• Praktisch für Dinge, die eine Weile sichtbar bleiben sollen, z.B. eine Toast-Benachrichtigung

Öffnen, Schließen, Umschalten: popovertargetaction

<button popovertarget="menu" popovertargetaction="show">Öffnen</button>
<button popovertarget="menu" popovertargetaction="hide">Schließen</button>
<button popovertarget="menu">Umschalten</button> <!-- toggle ist Standard -->

Wert	Verhalten
toggle (Standard)	öffnet, wenn geschlossen; schließt, wenn offen
show	öffnet nur (macht nichts, wenn schon offen)
hide	schließt nur

Styling: :popover-open und ::backdrop

#menu {
  border: none;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
}

#menu:popover-open {
  /* Styles, die nur gelten, während das Popover offen ist */
}

• :popover-open ist eine Pseudo-Klasse, die nur trifft, während das Popover sichtbar ist - genau wie :focus oder :hover aus dem Selektoren-Kapitel, nur eben für den Popover-Zustand
• Popover mit auto bekommen ebenfalls einen ::backdrop, den ihr wie beim <dialog>-Element stylen könnt

Praxisbeispiel: ein Dropdown-Menü

<button popovertarget="user-menu">Mein Konto ▾</button>

<ul id="user-menu" popover>
  <li><a href="/profil">Profil</a></li>
  <li><a href="/einstellungen">Einstellungen</a></li>
  <li><a href="/logout">Abmelden</a></li>
</ul>

#user-menu {
  list-style: none;
  margin: 0;
  padding: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

Hinweis

Popover, <dialog> und <details> lösen alle dasselbe Grundproblem: “etwas über dem Rest der Seite anzeigen” - aber für unterschiedliche Fälle. <dialog> (modal) für Dinge, die erst bestätigt werden müssen. popover für leichtgewichtige Menüs/Tooltips. <details> für dauerhaft im Fluss eingebetteten, aufklappbaren Inhalt wie eine FAQ.