A very common pattern on the web is to show content over the top of other content, drawing the user's attention to specific important information or actions that need to be taken. This content can take several different names — overlays, popups, popovers, dialogs, etc. We will refer to them as popovers through the documentation. Generally speaking, these can be:
- modal, meaning that while a popover is being shown, the rest of the page is rendered non-interactive until the popover is actioned in some way (for example an important choice is made).
- non-modal, meaning that the rest of the page can be interacted with while the popover is being shown.
Popovers which are created using the popover API are always non-modal. If you want to create a modal popover, a
<dialog> element is the right way to go, although bear in mind that
<dialog> elements are not put in the top layer by default — popovers are. There is significant overlap between the two — you might for example want to create a popover that persists, but control it using declarative HTML. You can even turn a
<dialog> element into a popover if you want to combine popover control and top level placement with dialog semantics.
Typical use cases for the popover API include user-interactive elements like action menus, custom "toast" notifications, form element suggestions, content pickers, or teaching UI.
You can create popovers in two different ways:
- Declaratively, via a set of new HTML attributes. A simple popover with a toggle button can be created using the following code:
<button popovertarget="mypopover">Toggle the popover</button> <div id="mypopover" popover>Popover content</div>
HTMLElement.togglePopover()can be used to toggle a popover between shown and hidden.
There are also new events to react to a popover being toggled, and CSS features to aid in styling popovers. All the new features are listed below.
See Using the popover API for a detailed guide to using this API.
A global attribute that turns an element into a popover element; takes a popover state (
"manual") as its value.
::backdroppseudo-element is a full-screen element placed directly behind popover elements, allowing effects to be added to the page content behind the popover(s) if desired (for example blurring it out).
:popover-openpseudo-class matches a popover element only when it is in the showing state — it can be used to style popover elements when they are showing.
"manual"), and can be used for feature detection. Reflects the value of the
popoverglobal HTML attribute.
Gets and sets the action to be performed (
"toggle") on the popover element being controlled by the control button. Reflects the value of the
Fired just before a popover element's state changes between showing and hidden, or vice versa.
Fired just after a popover element's state changes between showing and hidden, or vice versa. This event already existed to signal state changes on
<details>elements, and it seemed logical to extend it for popover elements.
See our Popover API examples landing page to access the full collection of MDN popover examples.
|HTML Standard |
BCD tables only load in the browser