Popover API

Konzepte und Nutzung

Ein sehr häufiges Muster im Web ist das Anzeigen von Inhalt über anderen Inhalten, um die Aufmerksamkeit des Benutzers auf spezifische wichtige Informationen oder Aktionen zu lenken, die ergriffen werden müssen. Dieser Inhalt kann verschiedene Namen tragen — Overlays, Popups, Popovers, Dialoge usw. Wir werden sie in der gesamten 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 auf irgendeine Weise bearbeitet 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.

Popovers, die mit der Popover-API erstellt wurden, 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 könnten zum Beispiel ein Popover erstellen wollen, das bleibt, es aber mithilfe von 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 benutzerinteraktive Elemente wie Aktionsmenüs, benutzerdefinierte "Toast"-Benachrichtigungen, Formularvorschläge, Inhaltsauswähler oder Lehr-UI.

Sie können Popovers auf zwei verschiedene Arten erstellen:

• Über eine Reihe neuer HTML-Attribute. Ein einfaches Popover mit einem Umschaltknopf kann mit dem folgenden Code erstellt werden:

  html

  <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 angezeigt und verborgen umzuschalten.

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

Siehe Verwendung der Popover API für eine detaillierte Anleitung zur Nutzung dieser API.

HTML-Attribute

popover

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

popovertarget

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

popovertargetaction

Gibt die auszuführende Aktion ("hide", "show" oder "toggle") an, die auf das durch einen Steuerknopf <button> oder <input> kontrollierte Popover-Element angewendet wird.

CSS-Features

::backdrop

Das ::backdrop-Pseudoelement ist ein Vollbild-Element, das direkt hinter Popover-Elementen platziert wird und es ermöglicht, Effekte auf den Seiteninhalt hinter dem/den Popover(s) hinzuzufügen (zum Beispiel um es unscharf zu machen).

:popover-open

Die :popover-open-Pseudoklasse passt auf ein Popover-Element nur dann, wenn es im angezeigten Zustand ist — es 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 zu anderen Schnittstellen

Instanz-Eigenschaften

HTMLElement.popover

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

HTMLButtonElement.popoverTargetElement und HTMLInputElement.popoverTargetElement

Ruft das Popover-Element ab, das durch den Steuerknopf kontrolliert wird, 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 kontrollierten Popover-Element ab und setzt sie. Reflektiert den Wert des HTML-Attributs popovertargetaction.

Instanz-Methoden

HTMLElement.hidePopover()

Blendet ein Popover-Element aus, 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 den Zuständen angezeigt und verborgen um.

Ereignisse

HTMLElement.beforetoggle-Ereignis

Wird unmittelbar bevor der Zustand eines Popover-Elements zwischen angezeigt und verborgen geändert wird, 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 direkt nach der Änderung des Zustands eines Popover-Elements zwischen angezeigt und verborgen, oder umgekehrt, ausgelöst.

Beispiele

Siehe unsere Popover API Beispiele Startseite, um auf die vollständige Sammlung von MDN-Popover-Beispielen zuzugreifen.

Spezifikationen

Browser-Kompatibilität

api.HTMLElement.popover

api.HTMLElement.beforetoggle_event.popover_elements

api.HTMLElement.toggle_event.popover_elements

Siehe auch

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