Popover API

Ein sehr häufiges Muster im Web ist es, Inhalte über andere Inhalte zu zeigen, um die Aufmerksamkeit des Benutzers auf spezifische wichtige Informationen oder Maßnahmen zu lenken, die ergreifen werden müssen. Diese Inhalte können verschiedene Namen haben — Overlays, Popups, Popovers, Dialoge usw. Wir werden sie in dieser Dokumentation als Popovers bezeichnen. Im Allgemeinen können diese folgendermaßen sein:

• modal, was bedeutet, dass während ein Popover angezeigt wird, der Rest der Seite nicht interaktiv ist, bis das Popover in irgendeiner Weise aktiviert wird (zum Beispiel, indem eine wichtige Entscheidung getroffen wird).
• nicht-modal, was bedeutet, dass der Rest der Seite interaktiv bleibt, während das Popover angezeigt wird.

Popover, die mit der Popover-API erstellt werden, sind immer nicht-modal. Wenn Sie ein modales Popover erstellen möchten, ist ein <dialog>-Element der richtige Weg. Es gibt eine erhebliche Überschneidung zwischen den beiden — Sie könnten zum Beispiel ein Popover erstellen wollen, das bestehen bleibt, es aber mithilfe deklarativen HTMLs steuern möchten. 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 sind benutzerinteraktive Elemente wie Aktionsmenüs, benutzerdefinierte "Toast"-Benachrichtigungen, Vorschläge für Formularelemente, Inhaltspicker oder für die Benutzeroberfläche lehrende Elemente.

Sie können Popovers auf zwei verschiedene Arten erstellen:

• Deklarativ, über eine Reihe neuer HTML-Attribute. Ein einfaches Popover mit einem Umschaltknopf kann mit folgendem Code erstellt werden:

  html

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

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

Es gibt auch neue Ereignisse, um auf das Umschalten eines Popovers zu reagieren, und CSS-Features, um beim Styling von Popovers zu helfen. Alle neuen Funktionen sind unten aufgelistet.

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" oder "manual") als Wert an.

popovertarget

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

popovertargetaction

Gibt die Aktion an, die ("hide", "show" oder "toggle") auf das steuernde Popover-Element durch einen Steuer-<button> oder -<input> ausgeführt werden soll.

::backdrop

Das ::backdrop-Pseudo-Element ist ein Vollbildelement, das direkt hinter Popover-Elementen platziert wird und es ermöglicht, Effekte auf die Seiteninhalte hinter dem/den Popover(s) hinzuzufügen, wenn gewünscht (zum Beispiel, um es zu verwischen).

:popover-open

Die :popover-open-Pseudo-Klasse passt ein Popover-Element nur dann an, wenn es sich im angezeigten Zustand befindet — sie kann verwendet werden, um Popover-Elemente zu stylen, wenn sie angezeigt werden.

ToggleEvent

Repräsentiert ein Ereignis, das den Benutzer benachrichtigt, wenn der Zustand eines Popover-Elements zwischen angezeigt und verborgen wechselt. Es ist das Ereignisobjekt für die beforetoggle und toggle Ereignisse, die bei Popovers ausgelöst werden, wenn sich deren Zustand ändert.

HTMLElement.popover

Ruft den Popover-Zustand eines Elements über JavaScript ab und setzt ihn ("auto" oder "manual") und kann für die Funktionsüberprüfung verwendet werden. Reflektiert den Wert des globalen HTML-Attributs popover.

HTMLButtonElement.popoverTargetElement und HTMLInputElement.popoverTargetElement

Ruft das gesteuerte Popover-Element durch den Steuerknopf ab und setzt es. Das JavaScript-Äquivalent des HTML-Attributs popovertarget.

HTMLButtonElement.popoverTargetAction und HTMLInputElement.popoverTargetAction

Ruft die auszuführende Aktion ("hide", "show" oder "toggle") auf dem durch den Steuerknopf gesteuerten Popover-Element ab und setzt sie. Reflektiert den Wert des HTML-Attributs popovertargetaction.

HTMLElement.hidePopover()

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

HTMLElement.showPopover()

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

HTMLElement.togglePopover()

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

HTMLElement.beforetoggle Ereignis

Wird ausgelöst, kurz bevor sich der Zustand eines Popover-Elements zwischen angezeigt und verborgen ändert, oder umgekehrt. 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 ausgelöst, unmittelbar nachdem sich der Zustand eines Popover-Elements zwischen angezeigt und verborgen ändert, oder umgekehrt.

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

• popover globales HTML-Attribut
• popovertarget HTML-Attribut
• popovertargetaction HTML-Attribut
• ::backdrop CSS-Pseudo-Element
• :popover-open CSS-Pseudo-Klasse