1 · pointer hover
Pointer-driven hover.
Delay ~500ms by default.
Delay ~500ms by default.
demo · v133
Keyboard, touch, and pointer triggers
interestfor is more than “hover to reveal”. Tab to the trigger with the keyboard or long-press it on touch — both surface the popover. The event log shows the three trigger paths the UA collapses into the same outcome.
Touch-press detection here uses pointer events — on a real mobile device, hold the button for ~500ms to invoke. Hover detection requires
(hover: hover).2 · keyboard focus
Keyboard focus triggers the same popover.
3 · long press
Touch long-press, same outcome.
activity log appears here
why one attribute is enough
Before interestfor, a hovercard required: a mouseenter/mouseleave pair, a focusin/focusout pair (else keyboards couldn't see it), a touch pointerdown+setTimeout for long-press, and a body click to dismiss. Plus matching ARIA wiring. The browser already knows how to express “the user is interested in this element” through the UA's input pipeline — interestfor taps directly into that and emits two events: interest and loseinterest.
el.addEventListener("interest", () => track("showed-interest"));
el.addEventListener("loseinterest", () => track("lost-interest"));