Stop Using JavaScript for Every Popover (2026 Guide)
Every line of JavaScript you ship for a popover is a maintenance bill the platform now pays for you. Here's the Baseline 2026 toolkit — Popover API, Invoker Commands, anchor positioning, field-sizing, :has() and light-dark() — that deletes the scripts you used to hand-write.
Every line of JavaScript you ship for a popover is a maintenance bill the platform now pays for you. Think about what a "simple" tooltip used to cost: open/close handlers, Escape-key listeners, outside-click detection, focus management, z-index wars, and a positioning library to keep it glued to its trigger. In 2026, the web platform handles all of that natively — and popovers are just the start. Anchor positioning, auto-growing textareas, parent selectors, and theme-aware colors have all gone Baseline. Stop using JavaScript for every popover and start deleting code instead. What you'll learn How the Popover API builds tooltips, menus, and popovers with zero JavaScript How Invoker Commands wire buttons to dialogs and popovers declaratively (Baseline since Dec 2025) How CSS anchor positioning replaces Floating UI / Popper.js for tooltips anchored to triggers How field-sizing: content auto-grows textareas without an input listener (Baseline June 2026) How :has() replaces JavaScript parent selectors for form validation and conditional UI How light-dark() delivers dark mode with no theme-toggle script HTML Popover API: popovers without JavaScript A popover used to need JavaScript for opening, Escape, outside clicks, and stacking above the page. The Popover API reduces it to two attributes: <button popovertarget="my-popover">Open popover</button> <div id="my-popover" popover> Hello from a native popover. </div> That's the whole implementation. Click the button and the popover opens. Click outside or press Escape and it closes — the browser handles it. Popovers render in the top layer , so they sit above everything: no z-index wars, no clipping inside overflow: hidden ancestors. For a menu, style the open state with :popover-open : #main-menu { border: 1px solid…