HTMLElement: Methode showPopover()

Baseline 2024 *

Newly available

Since April 2024, 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 Methode showPopover() der HTMLElement-Schnittstelle zeigt ein Popover-Element (d.h. eines, das ein gültiges popover-Attribut hat) durch Hinzufügen zur obersten Schicht an.

Wenn showPopover() auf einem Element mit dem popover-Attribut aufgerufen wird, das derzeit versteckt ist, wird ein beforetoggle-Ereignis ausgelöst, gefolgt von der Anzeige des Popovers, und anschließend wird das toggle-Ereignis ausgelöst. 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 programmgesteuert den Auslöser des Popovers, der mit der Anzeigeaktion verbunden ist, also dessen Steuerelement. Die Herstellung einer Beziehung zwischen einem Popover und seinem Auslöser mit der Option source hat zwei nützliche Effekte:

Der Browser platziert das Popover in einer logischen Position in der Tastaturfokus-Navigationsreihenfolge, wenn es angezeigt wird. Dies macht das Popover für Tastaturnutzer zugänglicher (siehe auch Popover-Zugänglichkeitsfunktionen).
Der Browser erstellt eine implizite Anker-Referenz zwischen den beiden, was es sehr bequem macht, Popovers relativ zu ihren Steuerelementen mit CSS-Ankerpositionierung zu positionieren. Siehe Popover-Ankerpositionierung für mehr Details.

Rückgabewert

Keiner (undefined).

Ausnahmen

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

Beispiele

Das folgende Beispiel bietet die Funktionalität, 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 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