HTML popover globales Attribut

Baseline 2024 *
Newly available

Since April 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

Das popover globale Attribut wird verwendet, um ein Element als Popover-Element zu kennzeichnen.

Wert

Das popover-Attribut kann einen der folgenden Werte annehmen:

"auto"

auto-Popover können "leicht ausgeblendet" werden – das bedeutet, dass Sie das Popover durch Klicken außerhalb davon oder Drücken der Esc-Taste ausblenden können. Das Anzeigen eines auto-Popovers schließt in der Regel andere bereits angezeigte auto-Popover, es sei denn, sie sind verschachtelt.

Hinweis: Ein leerer Wert für popover – popover oder popover="" – ist gleichbedeutend mit popover="auto".

"hint"

hint-Popover schließen keine auto-Popover, wenn sie angezeigt werden, schließen jedoch andere Hint-Popover. Sie können leicht ausgeblendet werden und reagieren auf Schließanforderungen.

"manual"

manual-Popover können nicht "leicht ausgeblendet" werden und schließen nicht automatisch. Popover müssen explizit über deklarative Schaltflächen zum Anzeigen/Ausblenden/Umschalten oder JavaScript angezeigt und geschlossen werden. Mehrere unabhängige manual-Popover können gleichzeitig angezeigt werden.

Beschreibung

Popover-Elemente sind über display: none versteckt, bis sie über ein auslösendes/steuerndes Element (d.h. ein <button> oder <input type="button"> mit einem popovertarget-Attribut) oder einen HTMLElement.showPopover()-Aufruf geöffnet werden.

Wenn sie geöffnet sind, erscheinen Popover-Elemente über allen anderen Elementen in der oberen Ebene und werden nicht von den position- oder overflow-Stilen der Elternelemente beeinflusst.

Popover, die den auto-Zustand haben, können mithilfe zugehöriger Steuerungen (festgelegt durch das popovertarget-Attribut) gezeigt und ausgeblendet werden und durch Klicken außerhalb des Popover-Bereichs, Öffnen eines anderen Popovers oder durch Drücken browser-spezifischer Mechanismen wie der Esc-Taste "leicht ausgeblendet" werden.

In der Regel kann nur ein auto-Popover gleichzeitig auf dem Bildschirm angezeigt werden – das Anzeigen eines zweiten Popovers, während bereits eines angezeigt wird, blendet das erste aus. Die Ausnahme von dieser Regel besteht, wenn Sie verschachtelte auto-Popover haben. Siehe Verschachtelte Popover für weitere Details.

Sie können auch mit JavaScript gesteuert werden, zum Beispiel kann die HTMLElement.togglePopover()-Methode verwendet werden, um ein Popover zwischen gezeigt und versteckt umzuschalten.

Im Gegensatz dazu müssen manual-Popover manuell gezeigt und versteckt werden – sie schließen andere Popover beim Anzeigen nicht automatisch und können nicht leicht ausgeblendet werden. Dies ermöglicht Anwendungsfälle, bei denen Sie mehrere Popover gleichzeitig anzeigen möchten.

hint-Popover schließen keine auto-Popover, wenn sie angezeigt werden, schließen jedoch andere Hint-Popover. Sie können leicht ausgeblendet werden und reagieren auf Schließanforderungen.

In der Regel werden hint-Popover in Reaktion auf nicht-klickbare JavaScript-Ereignisse wie mouseover/mouseout und focus/blur gezeigt und versteckt. Das Klicken auf eine Schaltfläche, um ein hint-Popover zu öffnen, würde ein offenes auto-Popover leicht ausblenden.

Für detaillierte Informationen zur Verwendung siehe die Popover API-Landingpage.

Beispiele

Das folgende Beispiel rendert eine Schaltfläche, die ein Popover-Element öffnet, wenn sie aktiviert wird.

html
<button popovertarget="my-popover">Open Popover</button>

<div popover id="my-popover">Greetings, one and all!</div>

Hinweis: Besuchen Sie unsere Popover API-Beispiel-Landingpage, um die vollständige Sammlung von MDN-Popover-Beispielen zu sehen.

Spezifikationen

Specification
HTML
# the-popover-attribute

Browser-Kompatibilität

Siehe auch