A developer shares their experience migrating tooltip implementations from JavaScript libraries to the browser-native Popover API. The Popover API handles keyboard interactions (including Escape key), ARIA state synchronization, and focus management automatically through HTML attributes like `popover`, `popovertarget`, and `popovertargetaction`. The author details accessibility improvements gained for free, remaining gaps (hover timing delays, manual focus restoration for `popover="manual"`), and when tooltip libraries like Floating UI still make sense — complex positioning, large design systems, or teams lacking accessibility expertise. CSS anchor positioning is also highlighted as an emerging complement to the API.

15m read timeFrom smashingmagazine.com
Post cover image
Table of contents
The “Old” TooltipWhy I Used A LibraryThis Was Not Bad CodeThe Moment I Tried The Popover APIWhat Immediately Stood OutFree Accessibility WinsWhere The Popover API Maybe Still Isn’t EnoughWhen I would Still Reach For A Tooltip LibraryThe Decision LineConclusion
2 Comments

Sort: