HTMLButtonElement: popoverTargetElement-Eigenschaft

Baseline 2024

Neu verfgbar

Seit April 2024 funktioniert diese Funktion auf aktuellen Gerten und in aktuellen Browserversionen. Auf lteren Gerten oder in lteren Browsern funktioniert sie mglicherweise nicht.

Mehr erfahren
Vollstndige Kompatibilitt anzeigen

Die popoverTargetElement-Eigenschaft der HTMLButtonElement-Schnittstelle erhlt und setzt das ber einen Button zu kontrollierende Popover-Element.

Es ist das JavaScript-quivalent zum HTML-Attribut popovertarget.

Die Herstellung einer Beziehung zwischen einem Popover und seinem auslsenden Button ber die popoverTargetElement-Eigenschaft hat zwei zustzliche ntzliche Effekte:

Der Browser erstellt eine implizite aria-details- und aria-expanded-Beziehung zwischen Popover und Auslser und platziert das Popover, wenn es angezeigt wird, in einer logischen Position in der Tastaturnavigationsreihenfolge. Dies macht das Popover zugnglicher fr Tastatur- und Assistenztechnologie (AT)-Nutzer (siehe auch Popover-Zugnglichkeitsfunktionen).
Der Browser erstellt eine implizite Ankerreferenz zwischen den beiden, was es sehr bequem macht, Popovers relativ zu ihren Steuerelementen mit CSS-Ankerpositionierung zu positionieren. Weitere Details und Beispiele finden Sie unter Popover-Ankerpositionierung.

Wert

Ein Verweis auf ein Popover-Element im DOM.

Dieses Beispiel zeigt die grundlegende Verwendung der Popover-API, indem ein <div>-Element als Popover festgelegt wird, und anschlieend als popoverTargetElement eines <button>-Elements gesetzt wird. Das popover-Attribut ist auf "manual" gesetzt, sodass das Popover mit einem Button geschlossen werden muss und nicht durch "leichtes Verwerfen", indem auerhalb des Popover-Bereichs ausgewhlt wird.

Zuerst definieren wir ein HTML-<button>-Element, das wir verwenden werden, um das Popover anzuzeigen und zu verstecken, und ein <div>, das das Popover sein wird. In diesem Fall setzen wir nicht das HTML-Attribut popovertargetaction 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 erhlt zuerst eine Referenz zu den <div>- und <button>-Elementen. Danach definiert er eine Funktion, um die Untersttzung der Popover zu berprfen.

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

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

Wenn die Popover-API untersttzt wird, setzt der Code das popover-Attribut des <div>-Elements auf "auto" und macht es zum Ziel-Popover des Umschalters. Danach setzen wir die popoverTargetAction des <button> auf "toggle". Wenn die Popover-API nicht untersttzt wird, ndern wir den Textinhalt des <div>-Elements, um dies auszusagen, und verstecken den Umschalt-Button.

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 standardmig ausgeblendet, aber wenn die API nicht untersttzt wird, wird Ihr Element "wie gewohnt" angezeigt.

Sie knnen das Beispiel unten ausprobieren. Zeigen und verstecken Sie das Popover, indem Sie den Button umschalten. Das "auto" Popover kann auch durch Auswhlen auerhalb der Grenzen des Popover-Textes geschlossen werden.