Popover API

Konzepte und Verwendung

Ein sehr verbreitetes Muster im Web besteht darin, Inhalte über anderen Inhalten anzuzeigen, um die Aufmerksamkeit des Benutzers auf bestimmte wichtige Informationen oder Maßnahmen zu lenken, die ergriffen werden müssen. Diese Inhalte können mehrere unterschiedliche Namen haben — Overlays, Popups, Popovers, Dialoge usw. Wir werden sie in der 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 verarbeitet wird (zum Beispiel, indem eine wichtige Entscheidung getroffen wird).
• nicht-modal, was bedeutet, dass der Rest der Seite interaktiv bleiben kann, während das Popover angezeigt wird.

Popovers, die mithilfe 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 erhebliche Überschneidungen zwischen den beiden — Sie könnten beispielsweise ein Popover erstellen wollen, das bestehen bleibt, es aber mithilfe von HTML steuern. Sie können ein <dialog>-Element in ein Popover umwandeln (<dialog popover> ist vollkommen gültig), wenn Sie die Popover-Steuerung mit den Dialogsemantiken kombinieren möchten.

Typische Anwendungsfälle für die Popover API sind benutzerinteraktive Elemente wie Aktionsmenüs, benutzerdefinierte "Toast"-Benachrichtigungen, Formularvorschläge, Inhaltswähler oder Lehr-UI.

Sie können Popovers auf verschiedene Weise erstellen:

• Über eine Reihe neuer HTML-Attribute. Ein einfaches Popover mit einer Umschalttaste 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. Zum Beispiel kann HTMLElement.togglePopover() verwendet werden, um ein Popover zwischen angezeigt und verborgen umzuschalten.

Die Popover API stellt auch Ereignisse zur Verfügung, um auf das Umschalten eines Popovers zu reagieren, und CSS-Funktionen zur Unterstützung beim Styling von Popovers. Siehe Verwendung der Popover API für einen detaillierten Leitfaden zur API.

Ein verwandtes Feature — Interest Invokers — kann verwendet werden, um Popovers bei Hover/Fokus ohne Verwendung von JavaScript anzuzeigen. Lesen Sie Verwendung von Interest Invokers, um mehr zu erfahren.

HTML-Attribute

interestfor Experimentell

Definiert ein HTML-<a>, <button> oder <area>-Element oder ein SVG- <a>-Element als Interest Invoker. Sein Wert ist die id des Zielelements, das in irgendeiner Weise beeinflusst wird (normalerweise angezeigt oder verborgen), wenn Interesse am Invoker-Element gezeigt oder verloren geht.

popover

Ein globales Attribut, das ein Element in ein Popover-Element verwandelt und als Wert einen Popover-Zustand ("auto", "hint" oder "manual") annimmt.

popovertarget

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

popovertargetaction

Gibt die Aktion an, die ("hide", "show" oder "toggle") am vom Steuer-<button> oder <input> beeinflussten Popover-Element ausgeführt werden soll.

CSS-Funktionen

::backdrop

Das ::backdrop-Pseudo-Element ist ein Vollbild-Element, das direkt hinter Popover-Elementen platziert wird und Effekte auf den Seiteninhalt hinter dem/den Popover(s) hinzugefügt, wenn gewünscht (zum Beispiel, um es zu verwischen).

interest-delay, interest-delay-start, und interest-delay-end Experimentell

Die interest-delay-Kurzschreibweise und ihre zugehörigen interest-delay-start und interest-delay-end Langschreibweisen können verwendet werden, um eine Verzögerung zwischen der Anzeige oder dem Verlust von Interesse und der Reaktion des Browsers auf diese Änderung hinzugefügt werden.

:interest-source und :interest-target

Diese Selektoren können verwendet werden, um Stil nur auf den Interest Invoker und sein zugehöriges Zielelement anzuwenden, wenn Interesse angezeigt wird.

:popover-open

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

Schnittstellen

InterestEvent Experimentell

Das Ereignisobjekt für die interest- und loseinterest-Ereignisse. Dies umfasst eine source-Eigenschaft, die eine Referenz auf das zugehörige Interest Invoker-Element enthält.

ToggleEvent

Stellt ein Ereignis dar, das ausgelöst wird, wenn ein Popover-Element zwischen angezeigt und verborgen gewechselt 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

Instanzeigenschaften

interestForElement Experimentell

Ruft eine Referenz auf das Element ab oder setzt es, das von einem Interest Invoker anvisiert wird. Wenn ein HTML- oder SVG-Interest Invoker ein Zielelement in seinem interestfor-Attribut referenziert, wird dieses Element in der äquivalenten interestForElement-Eigenschaft des DOM-Objekts referenziert. Verfügbar in den Schnittstellen HTMLButtonElement, HTMLAnchorElement, HTMLAreaElement und SVGAElement.

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. Widerspiegelt den Wert des globalen HTML-Attributs popover.

HTMLButtonElement.popoverTargetElement und HTMLInputElement.popoverTargetElement

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

HTMLButtonElement.popoverTargetAction und HTMLInputElement.popoverTargetAction

Ruft die Aktion ab, die ("hide", "show" oder "toggle") am vom Steuerknopf kontrollierten Popover-Element ausgeführt werden soll, und setzt sie. Widerspiegelt den Wert des HTML-Attributs popovertargetaction.

Instanzmethoden

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, indem es zur obersten Ebene hinzugefügt wird.

HTMLElement.togglePopover()

Schaltet ein Popover-Element zwischen den angezeigten und verborgenen Zuständen um.

Ereignisse

beforetoggle Ereignis

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

toggle Ereignis

Wird unmittelbar nachdem der Zustand eines Popover-Elements zwischen angezeigt und verborgen oder umgekehrt gewechselt hat, ausgelöst.

interest Experimentell

Wird am Zielelement eines Interest Invokers ausgelöst, wenn Interesse angezeigt wird, wodurch Code als Antwort ausgeführt werden kann.

loseinterest Experimentell

Wird am Zielelement eines Interest Invokers ausgelöst, wenn Interesse verloren geht, wodurch Code als Antwort ausgeführt werden kann.

Beispiele

• Sehen Sie sich unsere Sammlung von Popover API-Beispielen an.
• Sehen Sie sich unsere Sammlung von Interest Invoker-Beispielen an.

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