Popover API
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
A simple popover:
<button popovertarget="tip1">Show Tip</button>
<div id="tip1"
popover>
Here we can show a
helpful tip.
</div>
Try it Yourself »
How it Works
- The
popovertargetattribute in <button>, connects the button to the popover by its id - The
popoverattribute in <div>, 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.
| API | |||||
|---|---|---|---|---|---|
| Popover | 114 | 114 | 125 | 17 | 100 |
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
Show and hide popover:
<button popovertarget="tip1" popovertargetaction="show">Show</button>
<button popovertarget="tip1" popovertargetaction="hide">Hide</button>
<div id="tip1" popover>
Here we can show a helpful tip.
</div>
Try it Yourself »
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
Style a popover:
[popover] {
padding: 1rem;
border-radius: 8px;
}
[popover]::backdrop {
background: rgb(0 0 0 / 0.3); /* dim the page
behind popover */
}
Try it Yourself »
Use Popover or <dialog>?
- 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 <dialog> when the user has to deal with it before doing anything else, like a "Are you sure you want to delete?" box
