HTMLElement: popover property
Baseline 2025 *Newly available
Since January 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
* Some parts of this feature may have varying levels of support.
The popover
property of the HTMLElement
interface gets and sets an element's popover state via JavaScript ("auto"
, "hint"
, 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"
-
auto
popovers can be "light dismissed" — this means that you can hide the popover by clicking outside it or pressing the Esc key.Usually, only one
auto
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. "hint"
Experimental-
hint
popovers do not closeauto
popovers when they are displayed, but will close other hint popovers. They can be light dismissed and will respond to close requests.Usually they are shown and hidden in response to non-click JavaScript events such as
mouseover
/mouseout
andfocus
/blur
. Clicking a button to open ahint
popover would cause an openauto
popover to light-dismiss. "manual"
-
manual
popovers cannot be "light dismissed" are not automatically closed. Popovers must explicitly be displayed and closed using declarative show/hide/toggle buttons or JavaScript. Multiple independentmanual
popovers can be shown simultaneously.
Examples
Feature detection
You can use the popover
attribute to feature detect the Popover API:
function supportsPopover() {
return HTMLElement.prototype.hasOwnProperty("popover");
}
Setting up a popover programmatically
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
BCD tables only load in the browser
See also
popover
HTML global attribute- Popover API