Popover API

Konzepte und Verwendung

Ein häufiges Muster im Web besteht darin, Inhalte über anderen Inhalten anzuzeigen, um die Aufmerksamkeit auf wichtige Informationen oder erforderliche Aktionen zu lenken. Solche Inhalte werden unterschiedlich bezeichnet – etwa als Overlays, Popups, Popovers oder Dialoge. In dieser Dokumentation bezeichnen wir sie als Popovers. Grundsätzlich können sie sein:

• modal: Während ein Popover angezeigt wird, ist der Rest der Seite nicht interaktiv, bis eine Aktion am Popover erfolgt, beispielsweise eine wichtige Entscheidung getroffen wird.
• nicht modal: Der Rest der Seite bleibt interaktiv, während das Popover angezeigt wird.

Mit der Popover API erstellte Popovers sind immer nicht modal. Wenn Sie ein modales Popover erstellen möchten, verwenden Sie ein <dialog>-Element. Die beiden Ansätze überschneiden sich erheblich: Sie können beispielsweise ein Popover erstellen, das geöffnet bleibt, aber über HTML gesteuert wird. Ein <dialog>-Element kann auch als Popover verwendet werden (<dialog popover> ist gültig), wenn Sie die Popover-Steuerung mit der Semantik eines Dialogs kombinieren möchten.

Typische Anwendungsfälle für die Popover API sind interaktive Elemente wie Aktionsmenüs, benutzerdefinierte „Toast“-Benachrichtigungen, Vorschläge für Formularelemente, Auswahloberflächen für Inhalte oder Hilfen zur Bedienung der Benutzeroberfläche.

Sie können Popovers auf verschiedene Arten erstellen:

• Über eine Reihe neuer HTML-Attribute. Ein einfaches Popover mit einer Schaltfläche zum Umschalten lässt sich mit folgendem Code erstellen:

  html

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

• Über eine JavaScript-API. Beispielsweise können Sie mit HTMLElement.togglePopover() ein Popover abwechselnd ein- und ausblenden.

Die Popover API bietet außerdem Events, mit denen Sie auf das Ein- und Ausblenden eines Popovers reagieren können, sowie CSS-Funktionen zur Gestaltung von Popovers. Eine ausführliche Anleitung zur API finden Sie unter Verwendung der Popover API.

Eine verwandte Funktion – Interest Invokers – ermöglicht es, Popovers bei Hover oder Fokus ohne JavaScript anzuzeigen. Weitere Informationen finden Sie unter Verwendung von Interest Invokers.

HTML-Attribute

interestfor

Definiert ein HTML-Element <a>, <button> oder <area> oder ein SVG-Element <a> als Interest Invoker. Der Wert ist die id des Zielelements, auf das sich ein gezeigtes oder verlorenes Interesse am Invoker-Element auswirkt – normalerweise, indem es ein- oder ausgeblendet wird.

popover

Ein globales Attribut, das ein Element zu einem Popover-Element macht. Als Wert wird ein Popover-Zustand ("auto", "hint" oder "manual") angegeben.

popovertarget

Macht ein <button>- oder <input>-Element zu einer Schaltfläche zur Steuerung eines Popovers. Als Wert wird die ID des zu steuernden Popover-Elements angegeben.

popovertargetaction

Gibt die Aktion ("hide", "show" oder "toggle") an, die ein steuerndes <button>- oder <input>-Element am Popover-Element ausführen soll.

CSS-Funktionen

::backdrop

Das Pseudoelement ::backdrop erstreckt sich über den gesamten Bildschirm und liegt direkt hinter Popover-Elementen. Damit lassen sich bei Bedarf Effekte auf den Seiteninhalt hinter den Popovers anwenden, beispielsweise eine Unschärfe.

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

Mit der Kurzschreibweise interest-delay und den zugehörigen Einzel-Eigenschaften interest-delay-start und interest-delay-end lässt sich eine Verzögerung zwischen dem Anzeigen oder Verlieren von Interesse durch den Benutzer und der Reaktion des Browsers auf diese Änderung festlegen.

:interest-source und :interest-target

Mit diesen Selektoren können Sie den Interest Invoker beziehungsweise sein zugehöriges Zielelement nur dann gestalten, wenn Interesse angezeigt wird.

:popover-open

Die Pseudoklasse :popover-open trifft nur dann auf ein Popover-Element zu, wenn es angezeigt wird. Sie können damit angezeigte Popover-Elemente gestalten.

Schnittstellen

InterestEvent

Das Event-Objekt für die Events interest und loseinterest. Es enthält eine source-Eigenschaft mit einer Referenz auf das zugehörige Interest-Invoker-Element.

ToggleEvent

Repräsentiert ein Event, das ausgelöst wird, wenn ein Popover-Element zwischen dem angezeigten und dem ausgeblendeten Zustand wechselt. Es ist das Event-Objekt für die Events beforetoggle und toggle, die bei einer Zustandsänderung von Popovers ausgelöst werden.

Erweiterungen anderer Schnittstellen

Instanzmethoden

HTMLElement.hidePopover()

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

HTMLElement.showPopover()

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

HTMLElement.togglePopover()

Wechselt den Zustand eines Popover-Elements zwischen angezeigt und ausgeblendet.

Instanzeigenschaften

interestForElement

Ruft eine Referenz auf das Zielelement eines Interest Invokers ab oder legt sie fest. Wenn ein HTML- oder SVG-Interest-Invoker über sein interestfor-Attribut auf ein Zielelement verweist, wird dieses Element über die interestForElement-Eigenschaft des entsprechenden DOM-Objekts referenziert. Verfügbar für die Schnittstellen HTMLButtonElement, HTMLAnchorElement, HTMLAreaElement und SVGAElement.

HTMLElement.popover

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

HTMLButtonElement.popoverTargetElement und HTMLInputElement.popoverTargetElement

Ruft das von der Steuerschaltfläche gesteuerte Popover-Element ab oder legt es fest. Dies ist das JavaScript-Äquivalent des HTML-Attributs popovertarget.

HTMLButtonElement.popoverTargetAction und HTMLInputElement.popoverTargetAction

Ruft die Aktion ("hide", "show" oder "toggle") ab, die die Steuerschaltfläche am Popover-Element ausführt, oder legt sie fest. Spiegelt den Wert des HTML-Attributs popovertargetaction wider.

Events

Event beforetoggle

Wird unmittelbar vor dem Wechsel des Zustands eines Popover-Elements von angezeigt zu ausgeblendet oder umgekehrt ausgelöst. Kann verwendet werden, um das Öffnen eines Popovers zu verhindern oder andere Elemente zu aktualisieren, die auf den Popover-Zustand reagieren sollen.

Event toggle

Wird unmittelbar nach dem Wechsel des Zustands eines Popover-Elements von angezeigt zu ausgeblendet oder umgekehrt ausgelöst.

interest

Wird auf dem Zielelement eines Interest Invokers ausgelöst, wenn Interesse angezeigt wird. Dadurch kann als Reaktion darauf Code ausgeführt werden.

loseinterest

Wird auf dem Zielelement eines Interest Invokers ausgelöst, wenn Interesse verloren geht. Dadurch kann als Reaktion darauf Code ausgeführt werden.

Beispiele

• Sehen Sie sich unsere Sammlung von Beispielen zur Popover API an.
• Sehen Sie sich unsere Sammlung von Beispielen für Interest Invokers an.

Spezifikationen

Browser-Kompatibilität

api.HTMLElement.popover

api.HTMLElement.beforetoggle_event.popover_elements

api.HTMLElement.toggle_event.popover_elements

Siehe auch

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