HTML popover global attribute - HTML | MDN (original) (raw)

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.

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

Generally only one auto 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. See Nested popovers for more details.

They can also be controlled using JavaScript, for example the HTMLElement.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 close auto popovers when they are displayed, but will close other hint popovers. They can be light dismissed and will respond to close requests.

Usually hint popovers are shown and hidden in response to non-click JavaScript events such as mouseover/mouseout and focus/blur. Clicking a button to open a hint popover would cause an open auto popover to light-dismiss.

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