Popover API
ELI5 — The Vibe Check
The Popover API is native HTML for creating pop-up content — menus, tooltips, dialogs — with built-in light dismiss, focus management, and top-layer rendering. No more z-index wars, no more JavaScript positioning libraries. The browser finally built what we've been hacking together for years.
Real Talk
The HTML Popover API provides a native mechanism for creating popup content using the popover attribute. Popovers render in the top layer (above all z-index stacking contexts), support light dismiss (clicking outside), keyboard handling, and can be toggled with the popovertarget attribute without JavaScript.
Show Me The Code
<button popovertarget="my-popover">Open Menu</button>
<div id="my-popover" popover>
<p>This is a native popover!</p>
<p>Click outside to dismiss.</p>
</div>
When You'll Hear This
"The Popover API makes tooltips and menus trivial — no z-index, no JS positioning" / "Native popovers render in the top layer so they can't be clipped by overflow:hidden"
Related Terms
Headless UI
Headless UI gives you fully accessible, interaction-complete components with zero styling. It's the skeleton without the skin.
Portals
React Portals let you teleport a component's HTML output to a completely different part of the DOM while keeping it logically in the same place in your com...
Radix UI
Radix UI gives you components that work perfectly but look like nothing.
Shadow DOM
Shadow DOM is like a force field around your component's internals.