The popover attribute

Interactive without JavaScript

Lesson 10 of 20 · 10 min · Module 3: Accessible, interactive HTML

Menus, tips and help panels used to need JavaScript for opening, closing, the Escape key and clicks outside. The popover attribute gives you all of that in plain HTML.

Start this lesson →

Free. No installation: you write and run the code in your browser, and it is checked automatically.

By the end, you’ll be able to…

Open and close content with popover and popovertarget
Style a popover and its backdrop
Choose between a popover and a dialog

The idea

Add popover to an element and popovertarget="its-id" to a button. The button now toggles the element, which appears in the top layer above everything else. Escape or a click outside closes it. popovertargetaction="hide" creates a button that only closes it, and ::backdrop styles the area behind it.

<button popovertarget="info">More info</button>
<div id="info" popover>
  <p>Press Escape to close me.</p>
</div>

01Behaviour for free

A popover opens above the page, closes with Escape or a click outside, and only one such popover is open at a time. The browser also tells assistive technology whether the button’s panel is expanded.

02Hidden until opened

A closed popover is display: none, so it is neither shown nor read until its button opens it. Every popover needs an id that the button’s popovertarget points to.

<button popovertarget="menu">Menu</button>
<nav id="menu" popover>
  …
  <button popovertarget="menu" popovertargetaction="hide">Close</button>
</nav>

03Popover or dialog?

Use a popover for lightweight panels that do not block the page: menus, tips, pickers. Use a modal dialog element, opened with showModal() in JavaScript, when people must respond before continuing, such as confirming a deletion.

Your turn

1) Add the popover attribute to #shortcuts. 2) Just before it, add <button class="help-button" popovertarget="shortcuts">Keyboard shortcuts</button>. 3) Inside the popover, after the list, add a close button with popovertarget="shortcuts" and popovertargetaction="hide". 4) Style #shortcuts with padding: 24px, border: 1px solid #d9e2cf and border-radius: 12px, and give #shortcuts::backdrop the background rgb(0 0 0 / 0.3).

What the checks look for

The panel is a popover
A button opens it
A button inside closes it
The shortcuts list is still complete
The popover has 24px of padding
The popover has rounded corners
The backdrop dims the page

Try it in the editor →

Take this with you

The popover attribute gives accessible open-and-close behaviour with no script.

Go a little further

Try popover="manual": the panel no longer closes on Escape or outside clicks, so the close button becomes essential.