Popover API
popover attribute, popovertarget, top layer, [popover]Definition
The HTML attribute and DOM API — popover on an element, popovertarget on a button, showPopover() / hidePopover() — that makes any element a light-dismissable overlay in the browser’s top layer, with the open-and-close, the Escape key, the click-outside and the focus behavior handled by the platform
Menus, tooltips, toasts and date pickers without a library: the element is in the top layer (above every z-index), popover=“auto” closes it on outside click and Escape and closes other auto popovers when it opens, and popover=“manual” leaves that to you. Anchor positioning places it. Baseline across browsers since 2024. Nuxt UI’s overlays still run on Reka UI’s JavaScript for the parts CSS has not caught up on — focus trapping, nested menus — but the <dialog> element and this API are where the platform is going, and a new component here should reach for them first.
Everything a dropdown library did in a thousand lines, as one attribute. The top layer is the part that matters: a popover cannot be trapped under a stacking context, which was most of the bugs.