Hover tooltips without JavaScript events
Tooltips required JavaScript mouseenter/mouseleave listeners, focus handling, and manual positioning. Now popover=hint with the interestfor attribute gives you declarative, accessible hover UI.
2 Hover me
3</button>
4<div id="tip" popover=hint>
5 Tooltip content</div>
2btn.addEventListener('mouseenter', () => {
3 tip.hidden = false;
4 positionTooltip(btn, tip);
5});
6btn.addEventListener('mouseleave', () => {
7 tip.hidden = true;
8});
9btn.addEventListener('focus', /* … */);
10btn.addEventListener('blur', /* … */);
Browser Support for Popover hint
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Your first month is free
Managed WordPress hosting for faster sites.
All input modes
The browser triggers on hover (mouse), focus (keyboard), and long-press (touch). You write zero event handling.
Non-destructive
Hint popovers don't close other open auto or manual popovers. Layered UI coexists naturally.
Built-in delay
The interest-delay property (default 0.5s) prevents accidental triggers. Configurable with CSS.
How it works
Building accessible tooltips required at least four event listeners (mouseenter, mouseleave, focus, blur), a delay mechanism to prevent flicker, position logic, and careful DOM management. Libraries like Tippy.js exist specifically because this is so tedious to get right.
The new popover=hint type paired with the interestfor attribute handles all of this declaratively. The interestfor attribute on the trigger element points to the tooltip's ID. The browser shows the popover when the user 'shows interest' (hover, focus, long-press) and hides it when interest ends. Customize the delay with the interest-delay CSS property. Unlike popover=auto, hint popovers coexist with other open popovers.