HTMLElement: popover property
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 popover
property of the HTMLElement
interface gets and sets an element's popover state via JavaScript ("auto"
or "manual"
), and can be used for feature detection.
It reflects the value of the popover
global HTML attribute.
Value
An enumerated value; possible values are:
"auto"
: In auto state:- The popover can be "light dismissed" — this means that you can hide the popover by clicking outside it or pressing the Esc key.
- Usually, only one popover can be shown at a time — showing a second popover when one is already shown will hide the first one. The exception to this rule is when you have nested auto popovers. See Nested popovers for more details.
"manual"
: In manual state:- The popover cannot be "light dismissed", although declarative show/hide/toggle buttons will still work.
- Multiple independent popovers can be shown at a time.
Examples
Feature detection
You can use the popover
attribute to feature detect the Popover API:
js
function supportsPopover() {
return HTMLElement.prototype.hasOwnProperty("popover");
}
Setting up a popover programmatically
js
const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");
const popoverSupported = supportsPopover();
if (popoverSupported) {
popover.popover = "auto";
toggleBtn.popoverTargetElement = popover;
toggleBtn.popoverTargetAction = "toggle";
} else {
console.log("Popover API not supported.");
}
Specifications
Specification |
---|
HTML # dom-popover |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
popover | ||||||||||||
hint value |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial 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.
- Has more compatibility info.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
See also
popover
HTML global attribute- Popover API