The Popover API and less JavaScript for small UI

By Ajdin Holjan
Picture of the author
Published on
Popover API cover

Small UI can generate a surprising amount of JavaScript.

Dropdowns, teaching tips, command hints, small menus, hover cards, confirmation panels - none of these sound large, but each one can bring state, refs, outside-click detection, Escape key handling, focus behavior, z-index debates, and enough edge cases to make the component feel heavier than the feature.

That is why I like the direction of the Popover API.

It does not solve every overlay problem. It is not a full design system. But it gives the browser more responsibility for behavior that many of us have rebuilt again and again.

The part I enjoy

The basic version is almost suspiciously small:

<button popovertarget="profile-menu">Menu</button>
<div id="profile-menu" popover>
  ...
</div>

That is refreshing.

Of course, real interfaces still need styling, positioning, accessibility review, and product-specific decisions. A complex menu in a serious app may still deserve a dedicated component with carefully managed focus and collision behavior.

But not every popover is that complex.

The larger pattern is what excites me: the platform keeps absorbing common UI needs. Dialog, popover, anchor positioning, view transitions - these are all signs that the browser is becoming a better application surface.

Good front-end work in 2026 means knowing when to use the platform directly. Less JavaScript is not automatically better, but unnecessary JavaScript is still unnecessary.

When the browser gives us a reliable primitive, I want to at least consider it before rebuilding the primitive myself.