HTMLElement: showPopover()-Methode

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 showPopover()-Methode der HTMLElement-Schnittstelle zeigt ein Popover-Element (d.h. eines, das ein gültiges popover-Attribut besitzt) an, indem es zur obersten Ebene hinzugefügt wird.

Wenn showPopover() auf ein Element mit dem popover-Attribut aufgerufen wird, das derzeit verborgen ist, wird ein beforetoggle-Ereignis ausgelöst, gefolgt von der Darstellung des Popovers und dann dem toggle-Ereignis. Wenn das Element bereits angezeigt wird, wird ein Fehler ausgelöst.

Syntax

showPopover()
showPopover(options)

Parameter

options Optional

Ein Objekt, das die folgenden Eigenschaften enthalten kann:

source Optional

Ein HTMLElement-Verweis; definiert programmatisch den Auslöser des mit der Anzeigeaktion verbundenen Popovers, also sein Steuerelement. Das Festlegen einer Beziehung zwischen einem Popover und seinem Auslöser mithilfe der source-Option hat zwei nützliche Effekte:

Der Browser platziert das Popover an einer logischen Position in der Tastaturfokus-Navigationsreihenfolge, wenn es angezeigt wird. Dies macht das Popover für Tastaturbenutzer besser zugänglich (siehe auch Popover-Zugänglichkeitsmerkmale).
Der Browser erstellt eine implizite Ankerreferenz zwischen den beiden, wodurch es sehr bequem ist, Popovers relativ zu ihren Steuerelementen mithilfe der CSS-Ankerpositionierung zu positionieren. Siehe Popover-Ankerpositionierung für weitere Details.

Rückgabewert

Keiner (undefined).

Ausnahmen

InvalidStateError DOMException: Wird ausgelöst, wenn das Popover bereits angezeigt wird.

Beispiele

Das folgende Beispiel bietet eine Funktionalität, um ein Popover anzuzeigen, indem eine bestimmte Taste auf der Tastatur gedrückt wird.

Zuerst etwas HTML:

html

<div id="mypopover" popover>
  <h2>Help!</h2>

  <p>You can use the following commands to control the app</p>

  <ul>
    <li>Press <ins>C</ins> to order cheese</li>
    <li>Press <ins>T</ins> to order tofu</li>
    <li>Press <ins>B</ins> to order bacon</li>
    <hr />
    <li>Say "Service" to summon the robot waiter to take your order</li>
    <li>Say "Escape" to engage the ejector seat</li>
  </ul>
</div>

Und nun das JavaScript, um die Funktionalität zu verbinden:

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

document.addEventListener("keydown", (event) => {
  if (event.key === "h") {
    popover.showPopover();
  }
});

Spezifikationen

Specification
HTML # dom-showpopover

Browser-Kompatibilität

Siehe auch

Popover API