The Popover API provides developers with a standard, consistent, flexible mechanism for displaying popover content on top of other page content. Popover content can be controlled either declaratively using HTML attributes, or via JavaScript.
Concepts and usageA 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:
Popovers 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. 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 turn a <dialog>
element into a popover (<dialog popover>
is perfectly valid) if you want to combine popover control 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>
Via a JavaScript API. For example, 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.
HTML attributespopover
A global attribute that turns an element into a popover element; takes a popover state ("auto"
, "hint"
, or "manual"
) as its value.
popovertarget
Turns a <button>
or <input>
element into a popover control button; takes the ID of the popover element to control as its value.
popovertargetaction
Specifies the action to be performed ("hide"
, "show"
, or "toggle"
) on the popover element being controlled by a control <button>
or <input>
.
::backdrop
The ::backdrop
pseudo-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-open
The :popover-open
pseudo-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.
ToggleEvent
Represents an event notifying the user when a popover element's state toggles between showing and hidden. It is the event object for the beforetoggle
and toggle
events, which fire on popovers when their state changes.
HTMLElement.popover
Gets and sets an element's popover state via JavaScript ("auto"
, "hint"
, or "manual"
), and can be used for feature detection. Reflects the value of the popover
global HTML attribute.
HTMLButtonElement.popoverTargetElement
and HTMLInputElement.popoverTargetElement
Gets and sets the popover element being controlled by the control button. The JavaScript equivalent of the popovertarget
HTML attribute.
HTMLButtonElement.popoverTargetAction
and HTMLInputElement.popoverTargetAction
Gets and sets the action to be performed ("hide"
, "show"
, or "toggle"
) on the popover element being controlled by the control button. Reflects the value of the popovertargetaction
HTML attribute.
HTMLElement.hidePopover()
Hides a popover element by removing it from the top layer and styling it with display: none
.
HTMLElement.showPopover()
Shows a popover element by adding it to the top layer.
HTMLElement.togglePopover()
Toggles a popover element between the showing and hidden states.
HTMLElement.beforetoggle
event
Fired just before a popover element's state changes between showing and hidden, or vice versa. Can be used to prevent a popover from opening, or to update other elements that need to be triggered by popover state.
HTMLElement.toggle
event
Fired just after a popover element's state changes between showing and hidden, or vice versa.
See our Popover API examples landing page to access the full collection of MDN popover examples.
Specifications Browser compatibility api.HTMLElement.popover api.HTMLElement.beforetoggle_event.popover_elements api.HTMLElement.toggle_event.popover_elements See alsopopover
HTML global attributepopovertarget
HTML attributepopovertargetaction
HTML attribute::backdrop
CSS pseudo-element:popover-open
CSS pseudo-classRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4