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 Feature-Erkennung 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 zurückgesetzt" werden — das bedeutet, dass Sie das 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 — 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" Experimentell

hint-Popovers schließen auto-Popovers nicht, wenn sie angezeigt werden, aber sie schließen andere hint-Popovers. Sie können leicht zurückgesetzt werden und reagieren auf Schließanforderungen.

In der Regel werden sie in Reaktion auf nicht-klickende JavaScript-Ereignisse wie mouseover/mouseout und focus/blur angezeigt und ausgeblendet. Das Klicken auf einen Button, um ein hint-Popover zu öffnen, würde dazu führen, dass ein bereits offenes auto-Popover leicht zurückgesetzt wird.

"manual"

manual-Popovers können nicht "leicht zurückgesetzt" werden und werden nicht automatisch geschlossen. Popovers müssen explizit mit deklarativen Show/Hide/Toggle-Buttons 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:

function supportsPopover() {
  return Object.hasOwn(HTMLElement.prototype, "popover");
}

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

popover HTML-Globalattribut
Popover API