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 verbundenen Popovers, d.h. dessen Steuerelement. Die Herstellung einer Beziehung zwischen einem Popover und seinem Auslöser mithilfe der source-Option hat zwei nützliche Effekte:

• Der Browser platziert das Popover in einer logischen Position in der Tastatur-Fokus-Navigationsreihenfolge, wenn es angezeigt wird. Dies macht das Popover für Tastaturnutzer besser zugänglich (siehe auch Popover-Zugänglichkeitsfunktionen).
• Der Browser erstellt eine implizite Ankerreferenz zwischen den beiden Elementen, was es sehr bequem macht, Popover relativ zu ihren Steuerelementen mittels CSS-Ankerpositionierung zu positionieren. Siehe Popover-Ankerpositionierung für weitere Details.

Rückgabewert

Keiner (undefined).

Ausnahmen

InvalidStateError DOMException

Wird ausgelöst, wenn diese Methode aufgerufen wird, während ein anderes Popover bereits gerade angezeigt oder verborgen wird (z. B. innerhalb eines beforetoggle-Event Listeners).

Beispiele

Das folgende Beispiel bietet eine Funktionalität, um 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 der JavaScript-Code, 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