W3cubDocs

/Web APIs

HTMLElement: popover property

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

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
popover 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/popover