Zero-JS tooltips and menus

March 14, 2026 · 4 min read · css HTML javascript Web Development

Set markodenic.tech as your preferred Google source

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

Rate this issue

Your ratings shape which issues I recommend to you.