HTML-Attribut „popover“ zeigt/verbirgt Elemente

1. Einordnung & Zweck

• Das popover-Attribut ist ein globales Attribut, das ein beliebiges Element als Popover-Element kennzeichnet: es kann später über JavaScript oder eine Steuerelement-Schaltfläche angezeigt bzw. verborgen werden. html.spec.whatwg.org+2MDN Web Docs+2
• Popovers erscheinen oberhalb des übrigen Inhalts (Top-Layer) und beeinflussen nicht das Layout des restlichen Dokuments (z. B. nicht durch z-index, wenn sie sichtbar sind). html.spec.whatwg.org+2MDN Web Docs+2
• Standardverhalten: Beim Laden der Seite sind Popovers mit display: none versteckt. MDN Web Docs+2html.spec.whatwg.org+2
• Das Attribut popover kann drei Zustände annehmen: "auto", "manual" oder (experimentell) "hint". Wird kein Wert angegeben (oder ein leerer Wert), so ist dies gleichbedeutend mit popover="auto". MDN Web Docs+3MDN Web Docs+3html.spec.whatwg.org+3

2. Attributwerte & Verhalten

Weitere Details siehe WHATWG-Spezifikation zu popover und Popover-Target-Attributen. html.spec.whatwg.org

3. Steuerung über Attribute

Beim Klick auf ein Steuerelement mit popovertarget wird das referenzierte Popover geöffnet/geschlossen, je nach popovertargetaction oder Default („toggle“). MDN Web Docs

4. JavaScript-API & Events

5. Styling & CSS-Unterstützung

• Pseudo-Element ::backdrop: für auto Popovers existiert ein ::backdrop-Pseudo-Element, das hinter dem Popover liegt (z. B. für halbtransparente Hintergründe) MDN Web Doc
• Pseudo-Klasse :popover-open: passt auf Popover-Elemente, wenn sie geöffnet sind — nützlich für CSS-Stilwechsel im sichtbaren Zustand. MDN Web Docs
• CSS-Eigenschaften, Positionierung etc. kannst du wie bei normalen HTML-Elementen anwenden. Allerdings: Popovers sind in einem separaten Layer, daher beeinflussen manche Layout-/Overflow-Eigenschaften nicht das Popover direkt. html.spec.whatwg.org

6. Beispiele

Deklarativer Popover (Default / Toggle):

<code><button popovertarget="info">Toggle Info</button>
<div id="info" popover>
  <p>Hier steht der Popover-Inhalt.</p>
  <button popovertarget="info" popovertargetaction="hide">Close</button>
</div></code>

<code><button popovertarget="info">Toggle Info</button>
<div id="info" popover>
  <p>Hier steht der Popover-Inhalt.</p>
  <button popovertarget="info" popovertargetaction="hide">Close</button>
</div></code>

Manueller Popover mit Timer (Auto-Schließen):

<code><button popovertarget="notif" popovertargetaction="show">
  Show Notification
</button>
<div id="notif" popover="manual">
  <p>Erfolg! Ihre Aktion war erfolgreich.</p>
</div>

<script>
  const notif = document.getElementById("notif");
  const btn = document.querySelector('[popovertarget="notif"]');

  btn.addEventListener("click", () => {
    notif.showPopover();
    setTimeout(() => {
      notif.hidePopover();
    }, 3000);
  });
</script></code>

<code><button popovertarget="notif" popovertargetaction="show">
  Show Notification
</button>
<div id="notif" popover="manual">
  <p>Erfolg! Ihre Aktion war erfolgreich.</p>
</div>

<script>
  const notif = document.getElementById("notif");
  const btn = document.querySelector('[popovertarget="notif"]');

  btn.addEventListener("click", () => {
    notif.showPopover();
    setTimeout(() => {
      notif.hidePopover();
    }, 3000);
  });
</script></code>

7. Einschränkungen, Fallstricke & Tipps

• Browser-Support prüfen: Die Popover-API ist relativ neu; nicht alle Browser unterstützen sie vollständig. (z. B. laut CanIUse) Can I Use+2html.spec.whatwg.org
• Semantik & Accessibility: Das Attribut popover gibt keine semantische Rolle vor. Du solltest passende ARIA-Rollen (z. B. role="menu", role="dialog") und ARIA-Attribute ergänzen. Hidde’s blog
• Positionierung beachten: Popovers „lösen sich“ aus dem normalen Dokumentstapel – relative Positionierung zu einem Auslöser-Element kann schwierig sein. Für präzise Positionen ist oft JavaScript notwendig. Stack Overflow
• Verschachtelte Popovers: Bei verschachtelten auto-Popover-Elementen gelten besondere Regeln beim Schließen und Fokus-Management. html.spec.whatwg.org
• Dialog vs Popover: Wenn du ein modales Verhalten brauchst, bei dem der Rest der Seite inaktiv werden soll, ist ein <dialog>-Element oft angemessener. Das Popover-Attribut kann jedoch auch auf <dialog> angewendet werden (<dialog popover>). MDN Web Docs