revision:
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.
The popover API gives elements some built-in browser-support magic such as:
Support for top-layer, so you don't have to manage z-index. When you open a popover or a dialog, you're promoting that element to a special layer on top of the page.
Light-dismiss behavior for free in auto popovers, so when you click outside of an element, the popover is dismissed, removed from the accessibility tree, and focus properly managed.
Default accessibility for the connective tissue of the popover's target and the popover itself.
All of this means less JavaScript has to be written to create all of this functionality and track all of these states.
Content on the web can be shown 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.
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 <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.
Popovers can be created 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:
Popover content
Via a JavaScript API. For example, "HTMLElement.togglePopover()"" can be used to toggle a popover between shown and hidden.
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.
There are also new events to react to a popover being toggled, and CSS features to aid in styling popovers.
popover : a global attribute that turns an element into a popover element; takes a popover state ("auto" 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 the action to be performed ("hide", "show", or "toggle") on the popover element being controlled by a control <button> or <input>.
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.
::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" 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.
HTMLElement toggle event : 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 <div> elements, and it seemed logical to extend it for popover elements.
I am a popover with more information.
<div>
<button popovertarget="my-popover">Open Popover</button>
<div id="my-popover" popover>
<p>I am a popover with more information.<p>
</div>
</div>
<style>
button {background: #ddd; font-weight: 800; border:0.2vw solid black; }
#my-popover { background: #333; color: white; font-weight: 400; padding: 1vw; max-width: 20vw; line-height: 1.4; position: relative;
top: 1vw; left: 0; right: 0; margin: 0 auto;}
</style>