popover
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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 will render a button which will open a popover element.
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
BCD tables only load in the browser