Popovers Used to Cost You a Library
Think about the last dropdown, tooltip, or “are you sure?” popup you shipped. There was probably a dependency attached: a positioning script, a focus helper, a pile of z-index patches. The HTML popover attribute replaces most of that with two attributes and a little CSS. No framework, no build step — and the browser handles the fiddly accessibility plumbing for you.
It works in Chrome and Edge 114+, Safari 17+, and Firefox 125+, so it's production-safe today. Here's the tour I give junior devs: three real scenarios, the auto/manual distinction, backdrop styling, and the accessibility details that actually matter.
The Smallest Working Example
Two pieces. A trigger button, and a panel marked with the popover attribute:
<button popovertarget='share-menu'>Share</button> <div id='share-menu' popover>…links here…</div>
Click the button and the panel opens; click again and it closes. The browser hides the panel by default, lifts it into the top layer when it opens — above every stacking context and z-index value on the page — and reflects the open state as aria-expanded on the button automatically. You get none of that from a div you toggle with a class.
Fresh popovers look plain: fixed to the viewport, centered, with a default border and padding. We'll restyle shortly.
Scenario 1: Dropdown Navigation
The default popover type is auto, and auto is exactly what a nav dropdown wants. It comes with light dismiss: click or tap outside the panel and it closes; press Escape and it closes. Opening a second auto popover closes the first one, so menus never pile up on each other.
Structure it like any other nav: a button labelled “Products” targeting a panel that holds your links. Keep the panel semantic — a plain list of anchors reads perfectly well to screen readers once open. One caveat: keyboard users can Tab into the links inside the popover, but arrow-key menu behavior is not provided. For a simple site header nobody misses it; for a full application menu you'll add that yourself (more below).
Scenario 2: A Confirmation Popup
“Delete this project?” fits a popover perfectly: small, contextual, gone once answered. The trick is the popovertargetaction attribute, which accepts show, hide, or toggle — toggle is the default.
Your Cancel button simply points back at the panel with popovertargetaction='hide'. The Delete button runs your real logic — that part still needs JavaScript or a form submission — and then closes the panel with hidePopover(). Either way, the open/close wiring itself stays pure HTML.
Scenario 3: Form Field Hints
Password rules, VAT number explanations, “why do you need my phone number?” — these are the tooltips users actually appreciate. Put a small button next to the label, target the hint panel, done. Light dismiss makes it behave well on mobile, where a tap outside should clearly dismiss the hint.
One rule I enforce in code review: the trigger must be a real button element. I keep finding spans with click handlers doing this job, and they're invisible to keyboard users and screen readers. A button styled down to a 16-pixel info icon costs two lines of CSS and buys focusability for free.
auto vs manual: The One Decision You Must Get Right
Set the value explicitly — popover='auto' or popover='manual' — and the difference is stark:
- auto: light dismiss on outside click, closes on Escape, and opening it closes any other open auto popover. Best for menus, tooltips, and popups that answer one question.
- manual: none of that. It stays open until something explicitly hides it — another button or a call to hidePopover() — and it never closes other popovers on its own.
Reach for manual when the popover must survive interaction elsewhere: a nested submenu inside an auto menu (if it were auto, opening it would instantly close its parent), a toast notification, or a multi-step panel where a stray outside click would wipe the user's progress. My rule of thumb: if a user could lose work by clicking elsewhere, it's manual.
Styling: Reset the Defaults, Then ::backdrop
The user-agent stylesheet gives every popover a border, padding, and centered fixed positioning. Clear those first and set your own background, radius, and shadow — you know the drill.
The more interesting hook is ::backdrop, the pseudo-element that sits between the popover and the rest of the page. It's fully transparent by default, which is why popovers don't dim the page out of the box. Style it and you get modal-like atmosphere without modal behavior:
[popover]::backdrop { background: rgb(0 0 0 / 0.4); backdrop-filter: blur(2px); }