TheshowPopover() method of theHTMLElement interface shows apopover element (i.e., one that has a validpopover attribute) by adding it to thetop layer.

WhenshowPopover() is called on an element with thepopover attribute that is currently hidden, abeforetoggle event will be fired, followed by the popover showing, and then thetoggle event firing. If the element is already showing, an error will be thrown.

Syntax

showPopover()showPopover(options)

Parameters

optionsOptional

An object that can contain the following properties:

sourceOptional

AnHTMLElement reference; programmatically defines the invoker of the popover associated with the show action, that is, its control element. Establishing a relationship between a popover and its invoker using thesource option has two useful effects:

• The browser places the popover in a logical position in the keyboard focus navigation order when shown. This makes the popover more accessible to keyboard users (see alsoPopover accessibility features).
• The browser creates an implicit anchor reference between the two, making it very convenient to position popovers relative to their controls usingCSS anchor positioning. SeePopover anchor positioning for more details.

Return value

None (undefined).

Exceptions

InvalidStateErrorDOMException

Thrown if the popover is already showing.

Examples

The following example provides functionality to show a popover by pressing a particular key on the keyboard.

First, some HTML:

<div 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>

And now the JavaScript to wire up the functionality:

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

Specifications

Browser compatibility

See also

• Popover API