Popover API

Ein sehr gängiges Muster im Web ist das Anzeigen von Inhalten über anderen Inhalten, um die Aufmerksamkeit des Nutzers auf spezifisch wichtige Informationen oder Aktionen zu lenken, die ergriffen werden müssen. Diese Inhalte können verschiedene Namen haben — Overlays, Popups, Popovers, Dialoge usw. In dieser Dokumentation werden wir sie als Popovers bezeichnen. Generell gesprochen können diese sein:

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

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

Typische Anwendungsfälle für die Popover API umfassen benutzerinteraktive Elemente wie Aktionsmenüs, benutzerdefinierte "Toast" Benachrichtigungen, Vorschläge für Formularelemente, Inhaltspicker oder UI-Lernhilfen.

Sie können Popovers auf zwei verschiedene Arten erstellen:

• Deklarativ, über eine Reihe neuer HTML-Attribute. Ein einfaches Popover mit einem Umschaltbutton 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 die Umschaltung eines Popovers zu reagieren, und CSS-Features, die bei der Gestaltung von Popovers helfen. Alle neuen Funktionen sind unten aufgelistet.

Siehe Verwendung der Popover API für einen ausführlichen 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 seinen Wert.

popovertarget

Verwandelt ein <button>- oder <input>-Element in einen Popover-Steuerbutton; nimmt die ID des Popover-Elements als seinen Wert.

popovertargetaction

Gibt die auszuführende Aktion ("hide", "show" oder "toggle") auf dem von einem Steuerbutton gesteuerten Popover-Element an.

::backdrop

Das ::backdrop Pseudo-Element ist ein bildschirmfüllendes Element, das direkt hinter Popover-Elementen platziert wird, um Effekte auf den Seiteninhalt hinter dem/den Popover(n) hinzuzufügen (zum Beispiel um diesen zu verwischen).

:popover-open

Die :popover-open Pseudo-Klasse trifft auf ein Popover-Element nur dann zu, wenn es im Zustand "angezeigt" ist — es kann verwendet werden, um Popover-Elemente zu gestalten, wenn sie angezeigt werden.

ToggleEvent

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

HTMLElement.popover

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

HTMLButtonElement.popoverTargetElement und HTMLInputElement.popoverTargetElement

Ruft das von einem Steuerbutton kontrollierte Popover-Element ab oder setzt es. Dies ist das JavaScript-Äquivalent des HTML-Attributs popovertarget.

HTMLButtonElement.popoverTargetAction und HTMLInputElement.popoverTargetAction

Ruft die durchzuführende Aktion ("hide", "show", "toggle") auf dem von einem Steuerbutton gesteuerten Popover-Element ab oder 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 unmittelbar bevor ein Zustand eines Popover-Elements zwischen "angezeigt" und "verborgen" wechselt oder umgekehrt ausgelöst.

HTMLElement toggle Ereignis

Wird unmittelbar nachdem ein Zustand eines Popover-Elements zwischen "angezeigt" und "verborgen" wechselt oder umgekehrt ausgelöst. Dieses Ereignis existierte bereits, um Zustandsänderungen bei <details>-Elementen zu signalisieren, und es schien logisch, es für Popover-Elemente zu erweitern.

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

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