HTMLElement: showPopover() Methode

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 mit der Anzeigeaktion verknüpften Popovers, d.h. sein Steuerelement. Eine Beziehung zwischen einem Popover und seinem Auslöser mithilfe der source Option herzustellen, hat zwei nützliche Effekte:

• Der Browser platziert das Popover in einer logischen Position in der Tastaturnavigationsreihenfolge, wenn es angezeigt wird. Dies macht das Popover für Tastaturbenutzer zugänglicher (siehe auch Popover-Zugänglichkeitsmerkmale).
• Der Browser erstellt eine implizite Ankerreferenz zwischen den beiden, was es sehr bequem macht, Popover relativ zu ihren Steuerelementen mit 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 ermöglicht das Anzeigen eines Popovers durch das Drücken einer bestimmten Taste auf der Tastatur.

Zuerst etwas 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>
  </ul>
  <hr />
  <ul>
    <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

Browser-Kompatibilität

Siehe auch

• Popover API