The HTML Popover API (standardized in the HTML Living Standard) allows any HTML element to be promoted to the browser's Native Top Layer simply by adding the "popover" attribute. Elements in the Top Layer render above all other elements on the page, regardless of parent z-index or overflow:hidden clipping contexts, completely eliminating the decades-old CSS "z-index wars" and complex portal frameworks.

An "auto" popover provides built-in "light dismiss": clicking anywhere outside the popover or pressing the Escape key automatically closes it. Opening another auto popover will also automatically close the currently open one, unless the second is nested inside the first. A "manual" popover does not light-dismiss; it remains visible until explicitly closed via a trigger button or script, making it ideal for persistent banners, toast notifications, or multi-step tooltips.

While both elements utilize the browser's Top Layer, they serve distinct UX paradigms. A modal dialog (

.showModal()) traps keyboard focus inside the dialog, inertly blocks all interaction with the rest of the page, and requires explicit user action. A popover is non-modal by default: users can still interact with background elements, focus is not aggressively trapped, and it provides instantaneous light dismissal for menus, flyouts, and context helpers.

Yes. The Popover API is fully declarative. By using a standard with "popovertarget=\"my-popover\"" and optional "popovertargetaction=\"toggle|show|hide\"", the browser handles opening, positioning, accessibility attributes (aria-expanded), and dismissal completely without writing a single line of JavaScript.