Popover API

Ein sehr verbreitetes Muster im Web ist es, Inhalte über anderen Inhalten anzuzeigen, um die Aufmerksamkeit des Benutzers auf bestimmte wichtige Informationen oder Aktionen zu lenken, die ausgeführt werden müssen. Diese Inhalte können verschiedene 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 auf irgendeine Weise bearbeitet wird (zum Beispiel wird eine wichtige Entscheidung getroffen).
• 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 könnten zum Beispiel ein Popover erstellen wollen, das bestehen bleibt, es aber mit deklarativem HTML steuern. Sie können ein <dialog>-Element in ein Popover umwandeln (<dialog popover> ist vollkommen gültig), wenn Sie die Steuerung eines Popovers mit den Semantiken eines Dialogs kombinieren möchten.

Typische Anwendungsfälle für die Popover-API sind benutzerinteraktive Elemente wie Aktionsmenüs, benutzerdefinierte "Toast"-Benachrichtigungen, Vorschläge für Formularelemente, Inhaltsauswähler oder lehrreiche Benutzeroberflächen.

Sie können Popovers auf zwei verschiedene Arten erstellen:

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

  htmlCopy to Clipboard

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

Es gibt auch neue Ereignisse, um auf das Umschalten eines Popovers zu reagieren, und CSS-Features, die bei der Gestaltung von Popovers helfen. Alle neuen Features sind unten aufgeführt.

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

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 Steuerungsknopf für ein Popover; nimmt die ID des zu steuernden Popover-Elements als Wert an.

popovertargetaction

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

::backdrop

Das ::backdrop Pseudo-Element ist ein vollflächiges Element, das direkt hinter Popover-Elementen platziert wird und es ermöglicht, Effekte auf die Seiteninhalte hinter dem/den Popover(s) anzuwenden, falls gewünscht (z.B. das Ausblenden).

:popover-open

Die :popover-open Pseudo-Klasse stimmt mit einem Popover-Element nur überein, wenn es sich im sichtbaren Zustand befindet – es kann verwendet werden, um Popover-Elemente zu stylen, wenn sie angezeigt werden.

ToggleEvent

Stellt ein Ereignis dar, das den Benutzer benachrichtigt, wenn sich der Zustand eines Popover-Elements zwischen sichtbar und verborgen ändert. Es ist das Ereignisobjekt für die beforetoggle und toggle Ereignisse, die auf Popovers ausgelöst werden, wenn sich deren Zustand ändert.

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

HTMLButtonElement.popoverTargetElement und HTMLInputElement.popoverTargetElement

Ruft das Popover-Element ab und setzt es, das durch den Steuerungsknopf kontrolliert wird. Das JavaScript-Äquivalent des HTML-Attributs popovertarget.

HTMLButtonElement.popoverTargetAction und HTMLInputElement.popoverTargetAction

Ruft die auszuführende Aktion ab und setzt sie ("hide", "show" oder "toggle") auf das vom Steuerungsknopf gesteuerte Popover-Element. Reflektiert den Wert des HTML-Attributs popovertargetaction.

HTMLElement.hidePopover()

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

HTMLElement.showPopover()

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

HTMLElement.togglePopover()

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

HTMLElement.beforetoggle Ereignis

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

HTMLElement.toggle Ereignis

Wird ausgelöst, kurz nachdem sich der Zustand eines Popover-Elements zwischen sichtbar und verborgen ändert oder umgekehrt.

Besuchen Sie unsere Popover-API-Beispiele-Seite, um auf die gesamte Sammlung von MDN Popover-Beispielen zuzugreifen.

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