Popover API

The Popover API is a built-in HTML feature for making things that pop up on top of the page, like menus, tooltips, info boxes, or small notifications, without writing any JavaScript.

Before it existed, developers had to write their own code to:

• show and hide the element

• keep it on top of everything else (the z-index problem)

• close it when you click outside it or press Esc

The browser now handles all of that for you. The Popover API works in all modern browsers.

Here, we show a simple Popover API example:

Example

How it Works

• The popovertarget attribute in , connects the button to the popover by its id

• The popover attribute in , turns the div into a popover. It stays hidden until something opens it

• Click the button and the popover appears. Click outside it, or press Esc, and it closes

In one sentence: Add popovertarget to a button and popover to an element, and the browser gives you a working pop-up that shows, hides, stays on top, and closes on its own.

Tip: There are two popover types:

• popover (same as popover="auto") closes when you click outside it, and opening one closes any other open auto popover.

• popover="manual" stays open until you close it yourself. This suits things like toast notifications.

Browser Support

The numbers in the table specify the first browser version that fully supports Popover API.

Useful Extras

It is possible to choose what the button should do, with the popovertargetaction attribute.

In the following example we create two buttons, one for "Show" popover and one for "Hide" popover:

Example

The default value of the popovertargetaction attribute is toggle, which toggles between open and close.

Style Popover with CSS

Here we style the popover with some padding and rounded borders. We also style the viewbox behind the popover with the CSS ::backdrop pseudo-element:

Example

[popover] {
  padding: 1rem;
  border-radius: 8px;
}

  [popover]::backdrop {
  background: rgb(0 0 0 / 0.3); /* dim the page
  behind popover */
}

Use Popover or ?

• Use a popover for light, non-blocking things like menus, tooltips, and hints. You can still use the rest of the page while it is open

• Use a modal when the user has to deal with it before doing anything else, like a "Are you sure you want to delete?" box