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 der HTMLElement-Schnittstelle ermittelt und setzt den Popover-Zustand eines Elements über JavaScript ("auto", "hint" oder "manual") und kann zur Funktionsüberprüfung verwendet werden.

Sie spiegelt den Wert des globalen HTML-Attributs popover wider.

Wert

Ein aufzählbarer Wert; mögliche Werte sind:

"auto"

auto Popovers können "leicht ausgeblendet" werden – das bedeutet, dass Sie den Popover durch Klicken außerhalb oder Drücken der Esc-Taste ausblenden können.

In der Regel kann nur ein auto Popover gleichzeitig angezeigt werden – wenn ein zweiter Popover angezeigt wird, während bereits einer angezeigt wird, wird der erste ausgeblendet. Die Ausnahme von dieser Regel ist, wenn Sie verschachtelte auto Popovers haben. Siehe Verschachtelte Popovers für weitere Details.

"hint"

hint Popovers schließen auto Popovers nicht, wenn sie angezeigt werden, schließen jedoch andere hint Popovers. Sie können leicht ausgeblendet werden und reagieren auf Schließen-Anforderungen.

In der Regel werden sie in Reaktion auf Nicht-Klick-JavaScript-Ereignisse wie mouseover/mouseout und focus/blur angezeigt und ausgeblendet. Wenn Sie auf eine Schaltfläche klicken, um ein hint Popover zu öffnen, würde dies ein offenes auto Popover leicht ausblenden.

"manual"

manual Popovers können nicht "leicht ausgeblendet" werden und werden nicht automatisch geschlossen. Popovers müssen explizit mittels deklarativer Anzeigen-/Verbergen-/Umschalt-Schaltflächen oder JavaScript angezeigt und geschlossen werden. Mehrere unabhängige manual Popovers können gleichzeitig angezeigt werden.

Beispiele

Funktionsüberprüfung

Sie können das popover-Attribut zur Funktionsüberprüfung der Popover API verwenden:

js
function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}

Programmgesteuertes Einrichten eines Popovers

js
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