Zero-JS tooltips and menus

March 14, 2026 | Read time: 4 minutes

Sponsor this newsletter to reach 9,000+ active developers

Hey everyone,

We’ve all spent years writing the same “glue code” just to open a menu or a tooltip. You usually need a click listener, a class toggle, and a complicated bit of logic to close the menu when the user clicks anywhere else on the screen.

It’s extra weight, extra execution time, and a total headache to maintain. The browser finally handles it for us.

The Modern Way: The Popover API

HTML now has a native way to handle “floating” UI. By using the popover attribute, you get professional behavior-like “light dismiss” and top-layer rendering without writing a single line of JavaScript.

                            
<button popovertarget="my-menu">Open Menu</button>

<div id="my-menu" popover>
  <p>I’m a native popover! Click anywhere outside to close me.</p>
</div>

Why this is a win:

Automatic “Light Dismiss”: The browser automatically closes the popover when you click outside or press “Esc.”
Top Layer Magic: Just like the <dialog> element, popovers are rendered in the “top layer.” You can officially stop fighting with z-index or overflow: hidden on parent containers.
Declarative Toggle: You don’t even need a script to open it; the popovertarget attribute handles the connection for you.
No Library Needed: You can stop importing heavy scripts for simple menus.

CSS Styling

You can use the new :popover-open pseudo-class to animate them as they appear:

                            
#my-menu:popover-open {
  border: 2px solid #40E0D0;
  padding: 1rem;
}

Browser Support

This became Baseline in early 2024. It’s supported in Chrome, Edge, Safari, and Firefox. It is officially ready for your production dashboards and apps.

Happy coding!
Marko