Baseline 2024 *
Newly available
Das popover globale Attribut wird verwendet, um ein Element als Popover-Element zu kennzeichnen.
Das popover-Attribut kann einen der folgenden Werte annehmen:
"auto"
auto-Popovers können durch leichtes Entfernen (âlight dismissedâ) geschlossen werden - das bedeutet, dass Sie das Popover durch Klicken auÃerhalb davon oder durch Drücken der Esc-Taste ausblenden können. Das Anzeigen eines auto-Popovers wird im Allgemeinen andere auto-Popovers schlieÃen, die bereits angezeigt werden, es sei denn, sie sind verschachtelt.
Hinweis: Ein leerer Wert für popover, also popover oder popover="", entspricht dem Setzen auf popover="auto".
"hint" Experimentell
hint-Popovers schlieÃen keine auto-Popovers, wenn sie angezeigt werden, aber sie schlieÃen andere Hint-Popovers. Sie können leicht entfernt werden und reagieren auf SchlieÃanforderungen.
"manual"
manual-Popovers können nicht leicht entfernt werden und werden nicht automatisch geschlossen. Popovers müssen ausdrücklich mithilfe deklarativer Anzeigen/Ausblenden/Wechselbuttons oder JavaScript angezeigt und geschlossen werden. Mehrere unabhängige manual-Popovers können gleichzeitig angezeigt werden.
Popover-Elemente sind über display: none verborgen, bis sie über ein aufrufendes/steuerndes Element geöffnet werden (z.B. ein <button> oder ein <input type="button"> mit einem popovertarget-Attribut) oder einen HTMLElement.showPopover()-Aufruf.
Wenn sie geöffnet sind, erscheinen Popover-Elemente über allen anderen Elementen in der Top-Schicht und werden nicht von den position- oder overflow-Stilen der übergeordneten Elemente beeinflusst.
Popovers im auto-Zustand können mithilfe zugeordneter Steuerungen (gekennzeichnet durch das popovertarget-Attribut) angezeigt und ausgeblendet und durch leichtes Entfernen (durch Klicken auÃerhalb des Popover-Bereichs, Ãffnen eines anderen Popovers oder Drücken browser-spezifischer Mechanismen wie der Esc-Taste) geschlossen werden.
Im Allgemeinen kann nur ein auto-Popover gleichzeitig auf dem Bildschirm angezeigt werden â wenn ein zweites Popover angezeigt wird, während bereits eines angezeigt wird, wird das erste ausgeblendet. Die Ausnahme von dieser Regel besteht, wenn Sie verschachtelte Auto-Popovers haben. Siehe Verschachtelte Popovers für weitere Details.
Sie können auch über JavaScript gesteuert werden, zum Beispiel kann die HTMLElement.togglePopover()-Methode verwendet werden, um ein Popover zwischen angezeigt und verborgen umzuschalten.
Im Gegensatz dazu müssen manual-Popovers manuell angezeigt und ausgeblendet werden â sie schlieÃen keine anderen Popovers, wenn sie angezeigt werden, und sie können nicht leicht entfernt 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, aber sie schlieÃen andere Hint-Popovers. Sie können leicht entfernt werden und reagieren auf SchlieÃanforderungen.
Ãblicherweise werden hint-Popovers als Antwort auf nicht klickbasierte JavaScript-Ereignisse wie mouseover/mouseout und focus/blur angezeigt und ausgeblendet. Das Klicken auf einen Button, um ein hint-Popover zu öffnen, würde ein geöffnetes auto-Popover leicht entfernen.
Für detaillierte Informationen zur Nutzung finden Sie auf der Popover API-Ãbersichtsseite.
BeispieleDas folgende Beispiel rendert einen Button, der ein Popover-Element öffnet, wenn er aktiviert wird.
<button popovertarget="my-popover">Open Popover</button>
<div popover id="my-popover">Greetings, one and all!</div>
Hinweis: Siehe unsere Popover API Examples Landing Page, um auf die vollständige Sammlung von MDN-Popover-Beispielen zuzugreifen.
Spezifikationen Browser-Kompatibilität Siehe auchpopovertarget HTML-Attributpopovertargetaction HTML-Attribut::backdrop CSS-Pseudoelement:popover-open CSS-PseudoklasseRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4