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 mit einem gültigen popover-Attribut) an, indem es zur Top-Ebene hinzugefügt wird.

Wenn showPopover() bei einem Element mit dem aktuell ausgeblendeten popover-Attribut aufgerufen wird, wird ein beforetoggle-Ereignis ausgelöst. Danach wird das Popover angezeigt und dann das 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

Eine HTMLElement-Referenz; definiert programmatisch den Auslöser des mit der Anzeigefunktion verknüpften Popovers, also dessen Steuerelement. Die Beziehung zwischen einem Popover und seinem Auslöser mittels der source-Option herzustellen, hat zwei nützliche Effekte:

Der Browser platziert das Popover in einer logischen Position in der Tastatur-Fokussierungsreihenfolge beim Anzeigen. Dies macht das Popover für Tastaturbenutzer zugänglicher (siehe auch Popover-Zugänglichkeitsfunktionen).
Der Browser erstellt eine implizite Ankerreferenz zwischen beiden, was es sehr praktisch macht, Popovers relativ zu ihren Steuerelementen mittels CSS-Ankerpositionierung zu positionieren. Weitere Details finden Sie unter Popover-Ankerpositionierung.

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 durch Drücken einer bestimmten Taste auf der Tastatur anzuzeigen.

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 jetzt das JavaScript, um die Funktionalität zu verknüpfen:

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

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

Spezifikationen

Specification
HTML # dom-showpopover

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Popover API