Popover API

Konzepte und Nutzung

Ein sehr übliches Muster im Web ist es, Inhalte über den anderen Inhalten anzuzeigen, um die Aufmerksamkeit des Benutzers auf spezifische wichtige Informationen oder erforderliche Aktionen zu lenken. 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 sein:

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

Mit der Popover-API erstellte Popovers sind immer nicht-modal. Wenn Sie ein modales Popover erstellen möchten, ist ein <dialog>-Element der richtige Weg. Es gibt erhebliche Überschneidungen zwischen den beiden — Sie möchten möglicherweise ein Popover erstellen, das bestehen bleibt, es aber mit HTML steuern. Sie können ein <dialog>-Element in ein Popover verwandeln (<dialog popover> ist vollkommen gültig), wenn Sie die Popover-Steuerung mit Dialog-Semantik 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 Lehruserinterfaces.

Sie können Popovers auf zwei verschiedene Arten erstellen:

• Ü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 zum Reagieren auf das Umschalten eines Popovers und CSS-Funktionen zur Unterstützung beim Styling von Popovers. Alle neuen Funktionen sind unten aufgeführt.

Siehe Using the popover API für einen detaillierten Leitfaden zur Verwendung dieser API.

HTML-Attribute

popover

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

popovertarget

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

popovertargetaction

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

CSS-Funktionen

::backdrop

Das ::backdrop-Pseudo-Element ist ein vollflächiges Element, das direkt hinter Popover-Elementen platziert wird und es erlaubt, Effekte auf den Seiteninhalt hinter den Popovers hinzuzufügen, falls gewünscht (zum Beispiel um ihn zu verwischen).

:popover-open

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

Schnittstellen

ToggleEvent

Repräsentiert ein Ereignis, das ausgelöst wird, wenn ein Popover-Element zwischen angezeigt und verborgen umgeschaltet wird. Es ist das Ereignisobjekt für die beforetoggle- und toggle-Ereignisse, die auf Popovers ausgelöst werden, wenn sich ihr Zustand ändert.

Erweiterungen anderer Schnittstellen

Instanz-Eigenschaften

HTMLElement.popover

Ruft den Popover-Zustand eines Elements über JavaScript ab oder setzt ihn ("auto", "hint" oder "manual") und kann für die Funktionserkennung verwendet werden. Spiegelt den Wert des globalen HTML-Attributs popover wider.

HTMLButtonElement.popoverTargetElement und HTMLInputElement.popoverTargetElement

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

HTMLButtonElement.popoverTargetAction und HTMLInputElement.popoverTargetAction

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

Instanz-Methoden

HTMLElement.hidePopover()

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

HTMLElement.showPopover()

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

HTMLElement.togglePopover()

Schaltet ein Popover-Element zwischen dem angezeigten und verborgenen Zustand um.

Ereignisse

HTMLElement.beforetoggle Ereignis

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

Beispiele

Besuchen Sie unsere Popover-API-Beispiele-Seite, um auf die vollständige Sammlung der MDN-Popover-Beispiele zuzugreifen.

Spezifikationen

Browser-Kompatibilität

api.HTMLElement.popover

api.HTMLElement.beforetoggle_event.popover_elements

api.HTMLElement.toggle_event.popover_elements

Siehe auch

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