HTMLElement: showPopover() method
Baseline 2025Newly available
Since January 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
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
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:
<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>
<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:
const popover = document.getElementById("mypopover");
document.addEventListener("keydown", (event) => {
if (event.key === "h") {
popover.showPopover();
}
});
Specifications
Specification |
---|
HTML # dom-showpopover |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
showPopover | ||||||||||||
source option | ||||||||||||
Implicit anchor reference via source |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- In development. Supported in a pre-release version.
- In development. Supported in a pre-release version.
- No support
- No support
- Experimental. Expect behavior to change in the future.