Popover API

The Popover API is a new feature of browsers to help create overlapping user interface elements and avoid common issues related to z-index stacking, dismissals, poorly implemented accessibility, and more. 

The Popovers API is a browser addition proposed by Open UI, a W3C community group that has set out to define and extend the capabilities of built-in web components. 

Open UI has a clear set of goals for Popovers, including:

• Accessible by default
• Easily styled and animated
• Built-in light dismissals, such as pressing the Esc key
• An easy way to move any element to the #top-layer
• Most common usage will not require JavaScript

Popovers were designed for easy implementation and can be used without needing to reach for JavaScript. To create a popover element, all that is needed is to add the popover attribute to the element that will be overlapping other elements within the UI.

<div id="my-popover" popover>
    <p>This is a popover!</p>
</div>

The element will be hidden automatically, only becoming visible once toggled open. 

Now, let’s create a button to toggle the popover. On the button, add the popovertarget attribute and supply the id of the popover element. Another necessary attribute is the popovertargetaction attribute, which will tell the browser what to do with the popover.

<button popovertarget="my-popover" popovertargetaction="toggle">
  Toggle Popover
</button>
<div id="my-popover" popover>
    <p>This is a popover!</p>
</div>

popovertargetaction action has three possible actions that can be performed:

• toggle - toggles the popover between an open and closed state.
• show - sets the popover to an open state.
• hide - sets the popover to a closed state.

Popovers can also be controlled through JavaScript with the addition of new methods that can be used on popover elements.

• showPopover() - sets the popover to an open state.
• hidePopover() - sets the popover to a closed state.

Actions related to the popover state can be run by listening for the onpopovershow and onpopoverhide events. 

Popovers can be styled with CSS like any other element by targeting the popover’s class or id, however, popovers can also be targetted by utilizing the bracketed attribute selector [popover]. 

[popover] {
  background: dodgerblue;
}

Two new pseudoselectors can be helpful in styling popovers:

• :popover-open - applies styling only when a popover is in an open state (great for animations!)
• ::backdrop - enables styling of the popover’s backdrop.

Popovers were created with accessibility in mind, with a few accessibility features included out-of-box:

• Any element can become a popover, which carries over element semantics to the #top-layer as well.
• When popover elements are open, they become the next focusable element in the tabindex.
• Users can close popovers by pressing the Esc key on the keyboard, as well as clicking outside the popover to dismiss.

Here is a demo using Popovers to create a drawer component

See the CodePen.

This demo is taking advantage of all the main features of the Popover API, including:

• No JavaScript is utilized to create the drawer toggle action.
• The drawer is placed in the #top-layer which prevents any issues with z-index stacking.
• The Popover drawer is styled using [popover] attribute selector, and utilizing the ::backdrop pseudo element and :popover-open pseudo selector for animations.
• The drawer can be closed by clicking the "Close" button within the drawer, by pressing the Esc key on the keyboard, or by clicking outside the drawer.

Popovers are a fairly new concept that is being adopted by browsers. Chrome 114 was the first browser to introduce Popovers and recently was added to Safari in version 17. Firefox has yet to implement Popovers fully, however, they can be enabled via a feature flag.

For further reading on the Popover API, check out the following links:

• Open UI Explainer
• Hidde de Vries post on differences between `<dialog>` and Popovers
• Adrian Roselli wrote a brief note on using Popovers and Dialogs
• MDN page on Popovers
• HTML Spec on Popovers

Ryan selected The Trevor Project for an honorary donation of $50

The Trevor Project’s mission is to end suicide among LGBTQ young people.