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.

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

Popover-Elemente sind über display: none verborgen, bis sie über ein aufrufendes/steuerndes Element (z. B. ein <button> oder <input type="button"> mit einem popovertarget-Attribut) oder einen Aufruf von HTMLElement.showPopover() geöffnet werden.

Wenn sie geöffnet sind, erscheinen Popover-Elemente über allen anderen Elementen in der Top-Ebene und werden nicht durch das position- oder overflow-Styling der Elternelemente beeinflusst.

Ein popover Attribut kann die Werte "auto" (Standard) oder "manual" haben. Popover mit dem auto-Zustand können durch Auswahl außerhalb des Popover-Bereichs "leicht geschlossen" werden und erlauben im Allgemeinen nur, dass ein Popover gleichzeitig auf dem Bildschirm angezeigt wird. Im Gegensatz dazu müssen manual Popover immer ausdrücklich verborgen werden, erlauben jedoch Anwendungsfälle wie verschachtelte Popover in Menüs.

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

Beispiele

Das folgende Beispiel ordnet einen Button an, der ein Popover-Element öffnet, wenn es aktiviert wird.

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

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

Hinweis: Siehe unsere Popover API Beispieleinstiegsseite, um vollen Zugriff auf die gesamte Sammlung von MDN Popover-Beispielen zu erhalten.

Spezifikationen

Specification
HTML
# the-popover-attribute

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
popover
hint value
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.

Siehe auch