Popover API — What Browser-Native Tooltips Actually Change

Anyone who's built a tooltip knows. Looks simple on the surface, then you deploy it to real users and the problems pile up.

Tab into trigger — nothing shows. Screen reader reads it twice or ignores it completely. Fast mouse movement causes flickering. Esc doesn't work. Focus vanishes.

Over time: event listeners stack up, separate hover/focus handling, outside-click special cases, manual ARIA sync... the code bloats.

Why Libraries Existed

Positioning alone justifies a dependency. Placing tooltips correctly across scroll containers, transforms, and responsive layouts isn't trivial.

But the real problem was accessibility. Mouse users want immediacy, keyboard users want predictability. Satisfying both creates delays and edge cases. Screen readers would read, not read, or double-read — inconsistently.

Miss one ARIA attribute and the accessibility tree gets confused. The code wasn't wrong — the platform lacked the right primitives.

Popover API

<button popovertarget="tip-1">Help</button>
<div id="tip-1" popover="manual" role="tooltip">
  Tooltip content here
</div>

That's it. No event listeners. No state tracking. No ARIA updates from JavaScript.

Focus the trigger and it shows. Press Esc and it disappears.

What Changes

Open/close — browser handles it from HTML alone. The relationship between trigger and tooltip is explicit in markup.

Esc key — works without ever adding a key listener. Browser understands popover dismissibility natively.

aria-expanded — auto-synced with popover open/close. No manual management, no stale state risk.

Focus restoration — when popover closes, focus returns to trigger automatically. Focus restoration code was removed, not added.

More important than less code: the shift in responsibility. Tooltips used to be "made to exist" by JavaScript. Now the browser understands the element's role in markup and participates in focus model, accessibility tree, and native dismiss rules.

Invoker Commands

popovertarget="id" connects a button to a popover. popovertargetaction specifies behavior:

• show — open only

• hide — close only

• toggle (default) — toggle open/closed

Multiple triggers can connect to the same tooltip.

Where It Falls Short

Timing — native popover opens/closes instantly. Fast mouse movement or skimming triggers causes flicker. Delay between hover/focus and opening still needs JavaScript.

Hover intent — browser can't tell if hover is intentional or the pointer is passing through. Short delay before hiding, canceling dismiss when pointer moves to tooltip — still JavaScript territory.

popover="manual" focus — unlike auto, manual doesn't auto-restore focus. When closing on blur, you must explicitly return focus to trigger.

When Libraries Still Make Sense

Large design systems need centralized behavior and consistent defaults. Complex positioning with nested scroll containers or custom flipping logic still favors Floating UI.

CSS anchor positioning is starting to cover much of this — relative placement to triggers, viewport-aware positioning, edge flipping in pure CSS. Included in Interop with full cross-browser support expected.

The default is shifting to native APIs. First time the simplest tooltip can also be the most correct one.