popover

Baseline 2025 *
Newly available

Since January 2025, 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 Popovers können "leicht entlassen" werden – das bedeutet, dass Sie den Popover durch Klicken außerhalb davon oder durch Drücken der Esc-Taste ausblenden können. Das Anzeigen eines auto Popovers schließt im Allgemeinen andere auto Popovers, die bereits angezeigt werden, es sei denn, sie sind verschachtelt.

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

"hint"

hint Popovers schließen keine auto Popovers, wenn sie angezeigt werden, schließen jedoch andere Hinweis-Popovers. Sie können leicht entlassen werden und reagieren auf Schließanfragen.

"manual"

manual Popovers können nicht "leicht entlassen" werden und schließen nicht automatisch. Popovers müssen explizit mittels deklarativer Anzeigen/Verbergen/Umschalt-Buttons oder JavaScript angezeigt und geschlossen werden. Mehrere unabhängige manual Popovers können gleichzeitig angezeigt werden.

Beschreibung

Popover-Elemente sind über display: none versteckt, bis sie über ein aufrufendes/steuerndes Element (z.B. 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 Top-Schicht und werden nicht von den position oder overflow Stileigenschaften der Elternelemente beeinflusst.

Popovers, die den auto Zustand haben, können mit assoziierten Steuerungen (gekennzeichnet durch das popovertarget Attribut) angezeigt und verborgen werden und durch Klicken außerhalb des Popover-Bereichs, das Öffnen eines anderen Popovers oder durch Drücken bestimmter browserspezifischer Mechanismen wie der Esc-Taste "leicht entlassen" werden.

Im Allgemeinen kann nur ein auto Popover gleichzeitig auf dem Bildschirm angezeigt werden — das Anzeigen eines zweiten Popovers, wenn eines bereits angezeigt wird, blendet das erste aus. Eine Ausnahme von dieser Regel besteht, wenn Sie verschachtelte auto Popovers haben. Weitere Details finden Sie unter Verschachtelte Popovers.

Sie können auch mit JavaScript gesteuert werden, zum Beispiel kann die HTMLElement.togglePopover() Methode verwendet werden, um einen Popover zwischen angezeigt und verborgen umzuschalten.

Im Gegensatz dazu müssen manual Popovers manuell angezeigt und verborgen werden — sie schließen nicht automatisch andere Popovers, wenn sie angezeigt werden, und können nicht leicht entlassen werden. Dies ermöglicht Anwendungsfälle, in denen Sie mehrere Popovers gleichzeitig anzeigen möchten.

hint Popovers schließen keine auto Popovers, wenn sie angezeigt werden, schließen jedoch andere Hinweis-Popovers. Sie können leicht entlassen werden und werden auf Schließanfragen reagieren.

Normalerweise werden hint Popovers als Reaktion auf nicht-Klick Javascript-Ereignisse wie mouseover/mouseout und focus/blur gezeigt und verborgen. Das Klicken auf einen Button, um ein hint Popover zu öffnen, würde dazu führen, dass ein geöffnetes auto Popover leicht entlassen wird.

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

Beispiele

Das folgende Beispiel rendert einen Button, der ein Popover-Element öffnet, wenn er aktiviert wird.

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

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

Hinweis: Sehen Sie sich unsere Popover API Beispiel-Startseite an, um die vollständige Sammlung von MDN Popover-Beispielen zu erhalten.

Spezifikationen

Specification
HTML
# the-popover-attribute

Browser-Kompatibilität

Siehe auch