Browser-native popovers — no libraries, no JavaScript required for basic use.
popover="auto"Closes automatically when you click outside or press Esc. Only one auto popover can be open at a time.
Click outside or press Esc to close.
<div id="my-pop" popover>Content</div>
<button popovertarget="my-pop">Open</button>popover="manual"Does not close on outside click or Esc — you control visibility explicitly.
<div id="pop" popover="manual">...</div>
<button popovertarget="pop" popovertargetaction="show">Show</button>
<button popovertarget="pop" popovertargetaction="hide">Hide</button>Popovers can replace custom tooltips, menus, and toast notifications.
popover attribute puts elements in the top layer, above all other content.
:popover-open Pseudo-classStyle the popover differently based on its open/closed state.
:popover-open
/* Fade in when open */
#my-pop:not(:popover-open) { opacity: 0; }
#my-pop::popover-open { opacity: 1; transition: opacity 0.2s; }::backdrop Pseudo-elementStyle the backdrop layer behind the popover — no overlay div needed.
The blurred, darkened background is a CSS ::backdrop on the popover itself.
#my-pop::backdrop {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}Control popovers and listen for toggle / beforetoggle events.
showPopover(), hidePopover(), or togglePopover().
const pop = document.querySelector('[popover]');
pop.showPopover();
pop.hidePopover();
pop.togglePopover();
pop.addEventListener('toggle', (e) => {
console.log(e.oldState, '→', e.newState);
});Everything the Popover API gives you out of the box.
| Feature | How | Notes |
|---|---|---|
| Declare a popover | popover or popover="auto" |
Hidden by default; lives in top layer when open |
| Manual control | popover="manual" |
No light-dismiss; stays open until explicitly closed |
| Trigger (HTML only) | popovertarget="id" |
Works on <button> and <input type="button"> |
| Action | popovertargetaction |
toggle (default), show, hide |
| Open state style | :popover-open |
CSS pseudo-class for when popover is visible |
| Backdrop | ::backdrop |
Pseudo-element behind the popover in the top layer |
| JS show | .showPopover() |
Throws if already open (auto type) |
| JS hide | .hidePopover() |
Throws if already closed |
| JS toggle | .togglePopover() |
Optional boolean to force state |
| Events | toggle, beforetoggle |
oldState / newState: "open" or "closed" |