HTMLButtonElement: popoverTargetElement-Eigenschaft

Baseline 2024

Neu verfügbar

Seit April 2024 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Die popoverTargetElement-Eigenschaft der HTMLButtonElement-Schnittstelle erhält 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 auslösenden Button über die popoverTargetElement-Eigenschaft hat zwei zusätzliche nützliche Effekte:

Der Browser erstellt eine implizite aria-details- und aria-expanded-Beziehung zwischen Popover und Auslöser und platziert das Popover, wenn es angezeigt wird, in einer logischen Position in der Tastaturnavigationsreihenfolge. Dies macht das Popover zugänglicher für Tastatur- und Assistenztechnologie (AT)-Nutzer (siehe auch Popover-Zugänglichkeitsfunktionen).
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.

In diesem Artikel

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 anschließend 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 außerhalb des Popover-Bereichs ausgewählt 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 erhält zuerst eine Referenz zu den <div>- und <button>-Elementen. Danach definiert er eine Funktion, um die Unterstützung der Popover zu überprüfen.

js
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 unterstützt 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 unterstützt wird, ändern wir den Textinhalt des <div>-Elements, um dies auszusagen, und verstecken den Umschalt-Button.

js
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 "wie gewohnt" angezeigt.

Sie können das Beispiel unten ausprobieren. Zeigen und verstecken Sie das Popover, indem Sie den Button umschalten. Das "auto" Popover kann auch durch Auswählen außerhalb der Grenzen des Popover-Textes geschlossen werden.

Popover API

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Popover API
HTMLButtonElement
Instanzeigenschaften
Instanzmethoden
Vererbung
Verwandte Seiten für Popover API
Anleitungen
1. Verwendung der Popover-API
2. Verwendung von "Interest Invokers"

HTMLButtonElement: popoverTargetElement-Eigenschaft

In diesem Artikel

Wert

Beispiele

Popover-Aktion umschalten mit einem automatischen Popover

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN