Dec 13

Popover API

A declarative way to display elements on top of page content.

By Ryan Trimble

What are Popovers?

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. 

Brought to us by Open UI

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:

How to use Popovers

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>

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
<div id="my-popover" popover>
<p>This is a popover!</p>

popovertargetaction action has three possible actions that can be performed:

JavaScript Implementation

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

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

Styling Popovers

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:

Accessible by default

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

Popover Example

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:

Browser Support

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.

More resources on Popovers

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

Ryan Trimble

Ryan Trimble

Ryan is a web developer based in Central PA who is passionate about coding and making people happy.

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

The Trevor Project

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