HTMLElement: popover-Eigenschaft
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.
Die popover-Eigenschaft des HTMLElement-Interfaces ruft den Popover-Zustand eines Elements ab und setzt ihn über JavaScript ("auto", "hint" oder "manual"). Sie kann auch zur Erkennung von Funktionen verwendet werden.
Sie spiegelt den Wert des globalen HTML-Attributs popover wider.
Wert
Ein enumerierter Wert; mögliche Werte sind:
"auto"-
auto-Popovers können "leicht verworfen" werden — das bedeutet, dass Sie den Popover ausblenden können, indem Sie außerhalb davon klicken oder die Esc-Taste drücken.Normalerweise kann nur ein
auto-Popover gleichzeitig angezeigt werden — das Anzeigen eines zweiten Popovers, wenn bereits eines angezeigt wird, blendet das erste aus. Die Ausnahme von dieser Regel ist, wenn Sie verschachtelte Auto-Popovers haben. Siehe Verschachtelte Popovers für weitere Details. "hint"-
hint-Popovers schließen keineauto-Popovers, wenn sie angezeigt werden, aber sie schließen andere Hint-Popovers. Sie können leicht verworfen werden und reagieren auf Schließanforderungen.Normalerweise werden sie als Reaktion auf nicht-klickende JavaScript-Ereignisse wie
mouseover/mouseoutundfocus/blurangezeigt und ausgeblendet. Das Klicken auf eine Schaltfläche, um einhint-Popover zu öffnen, würde ein geöffnetesauto-Popover leicht verwerfen. "manual"-
manual-Popovers können nicht "leicht verworfen" werden und werden nicht automatisch geschlossen. Popovers müssen explizit mithilfe von deklarativen Anzeigen/Verbergen/Umschalt-Schaltflächen oder JavaScript angezeigt und geschlossen werden. Mehrere unabhängigemanual-Popovers können gleichzeitig angezeigt werden.
Beispiele
Funktionsnachweis
Sie können das popover-Attribut verwenden, um die Popover-API zu erkennen:
function supportsPopover() {
return Object.hasOwn(HTMLElement.prototype, "popover");
}
Einrichten eines Popovers programmgesteuert
const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");
const popoverSupported = supportsPopover();
if (popoverSupported) {
popover.popover = "auto";
toggleBtn.popoverTargetElement = popover;
toggleBtn.popoverTargetAction = "toggle";
} else {
console.log("Popover API not supported.");
}
Spezifikationen
| Specification |
|---|
| HTML # dom-popover |
Browser-Kompatibilität
Siehe auch
popoverglobales HTML-Attribut- Popover API