HTMLElement: showPopover()-Methode

Syntax

showPopover()
showPopover(options)

Parameter

options Optional

Ein Objekt, das die folgenden Eigenschaften enthalten kann:

source Optional

Ein HTMLElement-Verweis; definiert programmatisch den Aufrufer des mit der Show-Aktion verbundenen Popovers, also sein Kontrollelement. Die Einrichtung einer Beziehung zwischen einem Popover und seinem Aufrufer mittels der source-Option hat zwei nützliche Effekte:

• Der Browser platziert das Popover bei der Anzeige in einer logischen Position in der Tastaturfokus-Navigationsreihenfolge. Dadurch wird das Popover für Tastaturbenutzer zugänglicher (siehe auch Popover-Zugänglichkeitsmerkmale).
• Der Browser erstellt einen impliziten Ankerverweis zwischen den beiden, wodurch es sehr bequem wird, Popover relativ zu ihren Steuerelementen mit CSS-Anker-Positionierung zu positionieren. Weitere Details finden Sie unter Popover-Anker-Positionierung.

Rückgabewert

Keiner (undefined).

Ausnahmen

InvalidStateError DOMException

Wird ausgelöst, wenn das Popover bereits angezeigt wird oder wenn diese Methode aufgerufen wird, während ein anderes Popover bereits im Prozess des Ein- oder Ausblendens ist (z.B. innerhalb eines beforetoggle-Ereignis-Listeners).

Beispiele

Das folgende Beispiel bietet die Möglichkeit, ein Popover durch Drücken einer bestimmten Taste auf der Tastatur anzuzeigen.

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