W3cubDocs

/Web APIs

HTMLElement: showPopover() method

The showPopover() method of the HTMLElement interface shows a popover element (i.e. one that has a valid popover attribute) by adding it to the top layer.

When showPopover() is called on an element with the popover attribute that is currently hidden, a beforetoggle event will be fired, followed by the popover showing, and then the toggle event firing. If the element is already showing, an error will be thrown.

Syntax

js

showPopover()

Parameters

None.

Return value

None (undefined).

Exceptions

InvalidStateError DOMException

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:

html

<div id="mypopover">
  <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>

And now the JavaScript to wire up the functionality:

js

const popover = document.getElementById("mypopover");

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

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
showPopover 114 114 114 No 100 17 114 114 No No 17 No

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/showPopover