Popover API

Ein sehr häufiges Muster im Web ist das Anzeigen von Inhalten über anderen Inhalten, um die Aufmerksamkeit des Nutzers auf spezifische wichtige Informationen oder auszuführende Aktionen zu lenken. Diese Inhalte können verschiedene Namen tragen – Overlays, Popups, Popovers, Dialoge usw. Im gesamten Dokument bezeichnen wir sie als Popovers. Im Allgemeinen können diese sein:

• Modal, was bedeutet, dass während ein Popover angezeigt wird, der Rest der Seite nicht interaktiv gerendert wird, bis das Popover in irgendeiner Weise aktiviert wird (z. B. durch eine wichtige Entscheidung).
• Nicht-modal, was bedeutet, dass der Rest der Seite interaktiv bleibt, während das Popover angezeigt wird.

Popovers, die mit der Popover-API erstellt werden, sind immer nicht-modal. Wenn Sie ein modales Popover erstellen möchten, ist das <dialog>-Element der richtige Weg. Es gibt erhebliche Überschneidungen zwischen den beiden – Sie könnten beispielsweise ein Popover erstellen wollen, das bestehen bleibt, es aber mit deklarativem HTML steuern. Sie können ein <dialog>-Element in ein Popover verwandeln (<dialog popover> ist vollkommen gültig), wenn Sie Popover-Steuerung mit Dialog-Semantik kombinieren möchten.

Typische Anwendungsfälle für die Popover-API umfassen nutzerinteraktive Elemente wie Aktionsmenüs, benutzerdefinierte "toast" Benachrichtigungen, Formularelementvorschläge, Inhaltspicker oder lehrende Benutzeroberflächen.

Sie können Popovers auf zwei verschiedene Arten erstellen:

• Deklarativ, über eine Reihe neuer HTML-Attribute. Ein einfaches Popover mit einer Umschalttaste kann mit dem folgenden Code erstellt werden:

  htmlCopy to Clipboard

  <button popovertarget="mypopover">Toggle the popover</button>
  <div id="mypopover" popover>Popover content</div>
  

• Über eine JavaScript-API. Beispielsweise kann HTMLElement.togglePopover() verwendet werden, um ein Popover zwischen sichtbar und verborgen umzuschalten.

Es gibt auch neue Ereignisse, um auf das Umschalten eines Popovers zu reagieren, und CSS-Funktionen, um das Styling von Popovers zu unterstützen. Alle neuen Funktionen sind unten aufgeführt.

Siehe Verwendung der Popover-API für einen detaillierten Leitfaden zur Verwendung dieser API.

popover

Ein Globales Attribut, das ein Element in ein Popover-Element verwandelt; nimmt einen Popover-Zustand ("auto", "hint" oder "manual") als Wert an.

popovertarget

Verwandelt ein <button>- oder <input>-Element in eine Popover-Steuertaste; nimmt die ID des zu steuernden Popover-Elements als Wert an.

popovertargetaction

Gibt die auszuführende Aktion ("hide", "show" oder "toggle") auf dem von einer Steuer-<button> oder <input>-Taste gesteuerten Popover-Element an.

::backdrop

Das ::backdrop Pseudoelement ist ein Element in voller Bildschirmgröße, das direkt hinter Popover-Elementen platziert wird und ermöglicht, Effekte auf den Seiteninhalt hinzuzufügen, der sich hinter dem Popover befindet (zum Beispiel es verschwommen darstellen).

:popover-open

Die :popover-open Pseudoklasse trifft auf ein Popover-Element nur dann zu, wenn es im angezeigten Zustand ist – es kann verwendet werden, um Popover-Elemente zu stylen, wenn sie angezeigt werden.

ToggleEvent

Repräsentiert ein Ereignis, das den Nutzer benachrichtigt, wenn der Zustand eines Popover-Elements zwischen sichtbar und verborgen umschaltet. Es ist das Ereignisobjekt für die beforetoggle und toggle Ereignisse, die auf Popovers ausgelöst werden, wenn sich ihr Zustand ändert.

HTMLElement.popover

Ruft den Popover-Zustand eines Elements über JavaScript ab und setzt ihn ("auto", "hint" oder "manual") und kann zur Feature-Erkennung verwendet werden. Entspricht dem Wert des globalen HTML-Attributs popover.

HTMLButtonElement.popoverTargetElement und HTMLInputElement.popoverTargetElement

Ruft das von der Steuertaste gesteuerte Popover-Element ab und setzt es. Das JavaScript-Äquivalent des HTML-Attributs popovertarget.

HTMLButtonElement.popoverTargetAction und HTMLInputElement.popoverTargetAction

Ruft die auf das gesteuerte Popover-Element auszuführende Aktion ab und setzt sie ("hide", "show" oder "toggle"). Entspricht dem Wert des HTML-Attributs popovertargetaction.

HTMLElement.hidePopover()

Verbirgt ein Popover-Element, indem es aus der obersten Ebene entfernt und es mit display: none gestaltet wird.

HTMLElement.showPopover()

Zeigt ein Popover-Element an, indem es zur obersten Ebene hinzugefügt wird.

HTMLElement.togglePopover()

Schaltet ein Popover-Element zwischen den Zuständen sichtbar und verborgen um.

HTMLElement.beforetoggle Ereignis

Wird kurz bevor der Zustand eines Popover-Elements zwischen sichtbar und verborgen wechselt, oder umgekehrt, ausgelöst. Kann verwendet werden, um zu verhindern, dass ein Popover geöffnet wird, oder um andere Elemente zu aktualisieren, die durch den Popover-Zustand ausgelöst werden müssen.

HTMLElement.toggle Ereignis

Wird gerade nach einer Zustandsänderung eines Popover-Elements zwischen sichtbar und verborgen, oder umgekehrt, ausgelöst.

Besuchen Sie unsere Popover-API-Beispielseite, um auf die vollständige Sammlung von MDN-Popover-Beispielen zuzugreifen.

• popover globales HTML-Attribut
• popovertarget HTML-Attribut
• popovertargetaction HTML-Attribut
• ::backdrop CSS-Pseudoelement
• :popover-open CSS-Pseudoklasse