popover
Baseline 2025Newly 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.
<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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
popover | ||||||||||||
hint value |
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
- Popover API
popovertarget
HTML-Attributpopovertargetaction
HTML-Attribut::backdrop
CSS-Pseudoelement:popover-open
CSS-Pseudoklasse