popover

The popover global attribute is used to designate an element as a popover element.

Popover elements are hidden via display: none until opened via an invoking/control element (i.e. a <button> or <input type="button"> with a popovertarget attribute) or a HTMLElement.showPopover() call.

When open, popover elements will appear above all other elements in the top layer, and won't be influenced by parent elements' position or overflow styling.

A popover attribute can have values "auto" (default) or "manual". Popovers that have the auto state can be "light dismissed" by selecting outside the popover area, and generally only allow one popover to be displayed on-screen at a time. By contrast, manual popovers must always be explicitly hidden, but allow for use cases such as nested popovers in menus.

For detailed information on usage, see the Popover API landing page.

Examples

The following renders a button that will open a popover element when activated.

html
<button popovertarget="my-popover">Open Popover</button>

<div popover id="my-popover">Greetings, one and all!</div>

Note: See our Popover API examples landing page to access the full collection of MDN popover examples.

Specifications

Specification
HTML Standard
# the-popover-attribute

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
popover

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

See also