popover
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 Standard # the-popover-attribute |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Popover API
popovertarget
HTML-Attributpopovertargetaction
HTML-Attribut::backdrop
CSS-Pseudoelement:popover-open
CSS-Pseudoklasse