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; transi