The Native Popover That Positions Itself

Stack Patterns — Episode 10 Every frontend team has written this code: a tooltip that appears on click, disappears when you click elsewhere, stays above the z-index of that one modal someone set to 9999, and kindly repositions itself when it hits the viewport edge. The result is typically Floating UI (35KB), three event listeners, a resize observer, and a quiet prayer. The browser now does all of it. Natively. Stable: The Popover API Baseline in every browser since April 2025. One attribute: <button popovertarget= "tip" > Settings </button> <div id= "tip" popover > Saved automatically. </div> That is the entire JavaScript: none. The browser provides the top layer (no z-index required), light dismiss (click outside to close), keyboard handling (ESC), and focus management. For free. One does rather appreciate a specification that ships with fewer bugs than most npm packages. Style it with :popover-open : [ popover ] :popover-open { opacity : 1 ; transition : opacity 0.2s ; transition-beh