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"). 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 verworfen" werden — das bedeutet, dass Sie das Popover durch Klicken außerhalb oder durch Drücken der Esc-Taste ausblenden können.

Normalerweise kann nur ein auto-Popover gleichzeitig angezeigt werden — wenn ein zweites Popover angezeigt wird, während eines bereits gezeigt wird, wird das erste ausgeblendet. Die Ausnahme von dieser Regel besteht, wenn Sie verschachtelte auto-Popovers haben. Weitere Informationen finden Sie unter Verschachtelte Popovers.

"hint" Experimentell

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

Normalerweise werden sie als Reaktion auf nicht-klickbare JavaScript-Ereignisse wie mouseover/mouseout und focus/blur angezeigt und versteckt. Ein Klick auf eine Schaltfläche, um ein hint-Popover zu öffnen, würde ein geöffnetes auto-Popover leicht verwerfen.

"manual"

manual Popovers können nicht "leicht verworfen" werden und werden nicht automatisch geschlossen. Popovers müssen explizit angezeigt und geschlossen werden, indem deklarative Schaltflächen zum Anzeigen/Verstecken/Umschalten oder JavaScript verwendet werden. Mehrere unabhängige manual-Popovers können gleichzeitig angezeigt werden.

Beispiele

Merkmals-Erkennung

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

function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("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 globales HTML-Attribut
Popover-API