Das popover-Attribut

Ein Popover ist ein Element, das über dem restlichen Seiteninhalt eingeblendet wird, ohne die Seite zu blockieren. Du kannst weiterhin scrollen, klicken und tippen. Typische Beispiele:

• Aufklappende Menüs und Aktionslisten
• Tooltips und Hilfetexte
• Hinweise wie “In den Warenkorb gelegt”
• Kleine Einstellungs-Panels

Das Besondere: popover ist ein globales Attribut. Du kannst es auf fast jedes Element setzen, meistens landet es auf einem <div>. Ein Element mit popover ist standardmäßig unsichtbar und wird erst beim Öffnen angezeigt.

Du brauchst nur zwei Zutaten: ein Element mit popover und einer id, dazu einen <button> mit popovertarget, der auf diese id zeigt.

<button popovertarget="info-popover">
  Popover öffnen
</button>

<div id="info-popover" popover>
  <strong>Hallo!</strong>
  <p>Ich bin ein Popover. Klick daneben oder
    drücke ESC, um mich zu schließen.</p>
</div>

Das war alles. Der Button öffnet das Popover, ein zweiter Klick schließt es wieder. Der Browser kümmert sich um das Ein- und Ausblenden, die ESC-Taste und den Klick daneben.

Wichtig: popovertarget funktioniert nur auf Buttons, also auf <button> oder <input> mit einem Button-Typ. Auf einem <div> oder <a> hat das Attribut keine Wirkung.

Standardmäßig zentriert der Browser das Popover in der Mitte des Viewports. Mit CSS kannst du es beliebig positionieren, zum Beispiel unter den auslösenden Button.

Ohne weitere Angabe toggelt ein Button mit popovertarget das Popover: Erster Klick öffnet, zweiter Klick schließt. Mit popovertargetaction legst du das Verhalten genauer fest:

Damit kannst du zum Beispiel einen eigenen Schließen-Button in das Popover setzen:

<button popovertarget="mein-popover" popovertargetaction="show">
  Anzeigen
</button>
<button popovertarget="mein-popover" popovertargetaction="hide">
  Verstecken
</button>
<button popovertarget="mein-popover" popovertargetaction="toggle">
  Umschalten
</button>

<div id="mein-popover" popover="manual">
  Ich lasse mich nur über die Buttons steuern.
</div>

Das popover-Attribut kennt zwei Werte, die das Schließ-Verhalten steuern. Schreibst du nur popover ohne Wert, gilt popover="auto".

popover="auto" bringt das sogenannte Light Dismiss mit: Ein Klick irgendwo außerhalb des Popovers schließt es, genauso wie die ESC-Taste. Öffnest du ein zweites auto-Popover, schließt sich das erste automatisch (außer die Popovers sind ineinander verschachtelt). Genau das Verhalten, das du von einem Dropdown-Menü erwartest.

popover="manual" schaltet Light Dismiss ab: Kein Klick daneben und keine ESC-Taste schließt das Popover. Es bleibt offen, bis es explizit geschlossen wird, per Button mit popovertargetaction="hide" oder per JavaScript. Außerdem können mehrere manuelle Popovers gleichzeitig offen sein. Das passt für Toast-Benachrichtigungen oder Panels, die der Nutzer bewusst wegklicken soll.

<button popovertarget="auto-pop">auto öffnen</button>
<button popovertarget="manual-pop">manual öffnen</button>

<div id="auto-pop" popover="auto">
  popover="auto": Klick daneben oder ESC
  schließt mich.
</div>

<div id="manual-pop" popover="manual">
  <p>popover="manual": Ich bleibe offen,
    bis du unten klickst.</p>
  <button popovertarget="manual-pop" popovertargetaction="hide">
    Schließen
  </button>
</div>

Vielleicht kennst du das: Ein Overlay soll über allem liegen, aber irgendein Element mit z-index: 9999 schiebt sich trotzdem davor. Oder ein Eltern-Element mit overflow: hidden schneidet dein Dropdown ab.

Popovers haben dieses Problem nicht, denn der Browser rendert sie im Top Layer. Das ist eine spezielle Ebene, die immer über dem gesamten restlichen Seiteninhalt liegt. Modale Dialoge und der Vollbildmodus nutzen dieselbe Ebene. Das bedeutet für dich:

• Kein z-index nötig, egal was der Rest der Seite treibt
• Kein Abschneiden durch overflow: hidden auf Eltern-Elementen
• Keine Probleme mit Stacking Contexts von transform oder filter

Du kannst das Popover irgendwo tief in deinem HTML verschachteln, es liegt beim Öffnen trotzdem über allem.

Ein offenes Popover erreichst du in CSS über die Pseudo-Klasse :popover-open. Die Fläche dahinter stylst du mit dem Pseudo-Element ::backdrop, genau wie beim <dialog>. Standardmäßig ist der Backdrop bei Popovers komplett durchsichtig.

<style>
  #styled-popover {
    border: none;
    border-radius: 14px;
    padding: 20px 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  }

  /* Fläche hinter dem Popover abdunkeln */
  #styled-popover::backdrop {
    background: rgba(15, 23, 42, 0.4);
  }

  /* Nur im offenen Zustand animieren */
  #styled-popover:popover-open {
    animation: pop-in 0.2s ease-out;
  }

  @keyframes pop-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }
</style>

<button popovertarget="styled-popover">
  Gestyltes Popover öffnen
</button>

<div id="styled-popover" popover>
  <h2>Schick!</h2>
  <p>Abgedunkelter Hintergrund, Animation
    und Schatten: alles nur CSS.</p>
</div>

Ein Hinweis zum Verstecken: Der Browser blendet geschlossene Popovers über display: none aus. Setze deshalb kein eigenes display direkt auf [popover], sonst ist das Popover dauerhaft sichtbar. Wenn du zum Beispiel Flexbox brauchst, gehört das auf :popover-open (mehr dazu unter “Häufige Fehler”).

Für alles, was über Buttons hinausgeht, gibt es eine kleine JavaScript-API. Sie besteht aus drei Methoden und zwei Events:

Beide Events liefern über event.oldState und event.newState die Zustände "open" und "closed". beforetoggle eignet sich zum Beispiel, um Inhalte erst beim Öffnen nachzuladen.

<button id="js-toggle" type="button">
  Per JavaScript umschalten
</button>
<p id="js-status">Status: geschlossen</p>

<div id="js-popover" popover="manual">
  Dieses Popover wird per JavaScript gesteuert.
</div>

<script>
  const pop = document.getElementById("js-popover");

  document.getElementById("js-toggle")
    .addEventListener("click", () => {
      pop.togglePopover();
    });

  pop.addEventListener("beforetoggle", (event) => {
    const status = event.newState === "open"
      ? "offen"
      : "geschlossen";
    document.getElementById("js-status")
      .textContent = "Status: " + status;
  });
</script>

Auf den ersten Blick wirken Popover und <dialog> sehr ähnlich: Beide legen Inhalte über die Seite, beide landen im Top Layer, beide kennen ::backdrop. Der entscheidende Unterschied: Ein Popover ist nicht-modal.

• Kein Fokus-Trap: Beim Popover kann der Nutzer weiter durch die restliche Seite tabben. Ein modaler Dialog (showModal()) hält den Fokus dagegen im Dialog fest.
• Seite bleibt bedienbar: Hinter einem Popover kannst du weiter klicken und scrollen. Ein modaler Dialog blockiert alles andere.

Die Faustregel: Muss der Nutzer reagieren, bevor es weitergeht (etwas bestätigen, ein Formular ausfüllen), nimm <dialog> mit showModal(). Soll die Seite bedienbar bleiben (Menü, Hinweis, Tooltip), nimm ein Popover.

Neben auto und manual gibt es noch einen dritten Wert: popover="hint". Er ist für Tooltips gedacht, die sich neben einem offenen auto-Popover zeigen sollen, ohne es zu schließen. Ein hint-Popover schließt also keine auto-Popovers, wohl aber andere hint-Popovers, und unterstützt Light Dismiss.

popover="hint" ist noch nicht in allen Browsern verfügbar, Safari unterstützt den Wert bisher nicht. Für den produktiven Einsatz solltest du deshalb vorerst bei auto und manual bleiben.

Die Kombination aus Button und popovertarget bringt viel Barrierefreiheit automatisch mit: Der Browser verknüpft Button und Popover im Accessibility-Tree und pflegt aria-expanded auf dem Button, so wissen Screenreader-Nutzer, ob das Popover gerade offen ist. Ein paar Dinge bleiben trotzdem bei dir:

• DOM-Reihenfolge beachten: Da es keinen Fokus-Trap gibt, tabben Tastaturnutzer vom Button aus weiter. Platziere das Popover im HTML direkt hinter dem auslösenden Button, damit die Tab-Reihenfolge logisch bleibt.
• manual braucht einen Schließen-Weg: Bei popover="manual" gibt es weder ESC noch Klick daneben. Baue immer einen klar erkennbaren Schließen-Button ein.
• Keine kritischen Abfragen im Popover: Ein Popover kann leicht übersehen oder versehentlich weggeklickt werden. Für Entscheidungen, die der Nutzer treffen muss, ist ein modaler Dialog die bessere Wahl.
• Nicht nur per Hover öffnen: Ein Popover, das nur bei Maus-Hover erscheint, ist für Tastatur- und Touch-Nutzer unerreichbar. Sorge dafür, dass es auch per Klick oder Fokus erreichbar ist.

Mehr Grundlagen findest du im Artikel Barrierefreiheit.

Das popover-Attribut mit den Werten auto und manual, die Buttons mit popovertarget sowie die JavaScript-API werden von allen modernen Browsern unterstützt. Nur der Wert hint ist noch nicht überall angekommen.

• Chrome

  Komplett

• Firefox

  Komplett

• Safari

  Komplett

  popover="hint" wird noch nicht unterstützt

• Edge

  Komplett

• Opera

  Komplett

Popovers decken den nicht-modalen Teil der Overlay-Welt ab. Für den modalen Teil, also blockierende Dialoge mit Fokus-Trap, schau dir das <dialog>-Element an.