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 ruft den Popover-Zustand eines Elements ab und setzt ihn über JavaScript ("auto", "hint" oder "manual") und kann zur Feature-Erkennung verwendet werden.

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

Wert

Ein aufgezählter Wert; mögliche Werte sind:

"auto"

auto-Popovers können "leicht geschlossen" 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 beim Anzeigen keine auto-Popovers, schließen aber andere hint-Popovers. Sie können leicht geschlossen werden und reagieren auf Schließanforderungen.

Normalerweise werden sie als Antwort auf nicht-klick-bezogene JavaScript-Ereignisse wie mouseover/mouseout und focus/blur angezeigt und verborgen. Das Klicken auf eine Schaltfläche zum Öffnen eines hint-Popovers würde dazu führen, dass ein geöffnetes auto-Popover leicht geschlossen wird.

"manual"

manual-Popovers können nicht "leicht geschlossen" 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ängige manual-Popovers können gleichzeitig angezeigt werden.

Beispiele

Feature-Erkennung

Sie können das popover-Attribut verwenden, um die Popover API zu erkennen:

js
function supportsPopover() {
  return Object.hasOwn(HTMLElement.prototype, "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