Thepopoverglobal attribute is used to designate an element as a popover element.

Value

Thepopover attribute can take one of the following values:

"auto"

auto popovers can be "light dismissed" — this means that you can hide the popover by clicking outside it or pressing theEsc key. Showing anauto popover will generally close otherauto popovers that are already displayed, unless they are nested.

Note:Setting an empty value forpopover —popover orpopover="" — is equivalent to settingpopover="auto".

"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.

"manual"

manual popovers cannot be "light dismissed" and 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.

Description

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

When open, popover elements will appear above all other elements in thetop layer, and won't be influenced by parent elements'position oroverflow styling.

Popovers that have theauto state can be shown and hidden using associated controls (designated by thepopovertarget attribute) and "light dismissed" by clicking outside the popover area, opening another popover, or pressing browser-specific mechanisms such as theEsc key.

Generally only oneauto popover can be displayed on-screen 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. SeeNested popovers for more details.

They can also be controlled using JavaScript, for example theHTMLElement.togglePopover() method can be used to toggle a popover between shown and hidden.

By contrast,manual popovers must be manually shown and hidden — they don't automatically close other popovers when they are displayed and they can't be light dismissed. This allows for use cases where you want to show multiple popovers at the same time.

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.

Usuallyhint popovers are shown and hidden in response to non-click JavaScript events such asmouseover/mouseout andfocus/blur. Clicking a button to open ahint popover would cause an openauto popover to light-dismiss.

For detailed information on usage, see thePopover API landing page.

Examples

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

<button popovertarget="my-popover">Open Popover</button><div popover>Greetings, one and all!</div>

Specifications

Browser compatibility

See also

• Popover API
• popovertarget HTML attribute
• popovertargetaction HTML attribute
• ::backdrop CSS pseudo-element
• :popover-open CSS pseudo-class