HTMLButtonElement: popoverTargetElement-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 popoverTargetElement-Eigenschaft der HTMLButtonElement-Schnittstelle ruft das Popover-Element ab, das über eine Schaltfläche gesteuert wird, und legt es fest.

Es ist das JavaScript-Äquivalent des popovertarget-HTML-Attributs.

Die Herstellung einer Beziehung zwischen einem Popover und seiner auslösenden Schaltfläche über die popoverTargetElement-Eigenschaft hat zwei weitere nützliche Effekte:

Der Browser erstellt eine implizite aria-details- und aria-expanded-Beziehung zwischen Popover und Auslöser und platziert das Popover in einer logischen Position in der Tastaturfokussierungsreihenfolge, wenn es angezeigt wird. Dies macht das Popover für Benutzer von Tastatur und unterstützenden Technologien (AT) besser zugänglich (siehe auch Popover-Zugänglichkeitsmerkmale).
Der Browser erstellt eine implizite Ankerreferenz zwischen den beiden, was es sehr praktisch macht, Popovers relativ zu ihren Steuerelementen mithilfe der CSS-Ankerpositionierung zu positionieren. Siehe Popover-Ankerpositionierung für weitere Details.

Wert

Ein Verweis auf ein Popover-Element im DOM.

Dieses Beispiel zeigt die grundlegende Verwendung der Popover-API, wobei ein <div>-Element als Popover festgelegt wird, und anschließend als popoverTargetElement eines <button> gesetzt wird. Das popover-Attribut ist auf "manual" eingestellt, sodass das Popover über eine Schaltfläche geschlossen werden muss und nicht durch Auswahl außerhalb des Popover-Bereichs "light dismissed" werden kann.

Zuerst definieren wir ein HTML-<button>-Element, das wir verwenden werden, um das Popover anzuzeigen und zu verbergen, und ein <div>, das das Popover sein wird. In diesem Fall setzen wir das popovertargetaction-HTML-Attribut nicht auf das <button> oder das popover-Attribut auf das <div>, da wir dies programmatisch tun werden.

html

<button id="toggleBtn">Toggle popover</button>
<div id="mypopover">This is popover content!</div>

Der JavaScript-Code erhält zuerst einen Zugriff auf die <div>- und <button>-Elemente. Er definiert dann eine Funktion, um die Unterstützung des Popovers zu überprüfen.

const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");

// Check for popover API support.
function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}

Wenn die Popover-API unterstützt wird, setzt der Code das popover-Attribut des <div>-Elements auf "auto" und macht es zum Popover-Ziel der Umschalttaste. Wir setzen dann die popoverTargetAction des <button> auf "toggle". Wenn die Popover-API nicht unterstützt wird, ändern wir den Textinhalt des <div>-Elements, um dies mitzuteilen, und blenden die Umschalttaste aus.

if (supportsPopover()) {
  // Set the <div> element to be an auto popover
  popover.popover = "auto";

  // Set the button popover target to be the popover
  toggleBtn.popoverTargetElement = popover;

  // Set that the button toggles popover visibility
  toggleBtn.popoverTargetAction = "toggle";
} else {
  popover.textContent = "Popover API not supported.";
  toggleBtn.hidden = true;
}

Hinweis: Ein Popover-Element ist standardmäßig ausgeblendet, aber wenn die API nicht unterstützt wird, wird Ihr Element "normal" angezeigt.

Sie können das Beispiel unten ausprobieren. Zeigen und verbergen Sie das Popover, indem Sie die Schaltfläche umschalten. Das "auto"-Popover kann auch durch Auswahl außerhalb der Grenzen des Popover-Texts geschlossen werden.

Spezifikationen

Specification
HTML # dom-popovertargetelement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Popover API