The Popover API
Light dismiss, by default.
A declarative API for tooltips, dropdowns, and menus. Every popover gets light-dismiss, ESC-to-close, and the top layer for free.
Declarative popovers
Add the popover attribute to any element to make it a popover. Use popovertarget="id" on a button to wire up open/close — no JavaScript required.
auto vs manual
popover (or popover="auto") gets light-dismiss: clicking outside or pressing ESC closes it. popover="manual" opts out — you control dismissal yourself. Useful for persistent panels.
Anchor positioning
Combine with the anchor positioning API (anchor-name / position-anchor) to attach a popover to an exact element without measuring positions in JS.
More patterns
The blocks below contrast auto against manual dismissal, build a real menu with popovertarget, and listen for the toggle event in JavaScript to react when a popover opens or closes.
Try it 4 examples
Popover with popovertarget
HTML+CSS+JSintroThe [popover] element starts hidden; clicking the button — wired only by popovertarget="info", no JS — opens it in the top layer. Because the default is popover="auto", clicking outside or pressing ESC dismisses it for free.