demo · v142

Input Mode Matrix

The point of interestfor is that one attribute responds to every way a user might signal interest — mouse hover, keyboard focus, touch long-press, screen-reader virtual cursor, even pointer-pen hover. Each row below shows whether your current input device has surfaced an interest event yet. Touch each target on whatever device you brought.

tap, hover, focus, long-press, or AT-navigate either target

Anchor target

hover or focus me
Anchor popover Surfaced via <a> element. Same input modes as button.

Button target

Button popover The popover invocation fires the same way on <button>.

input modes seen so far

mouse hover

not seen

keyboard focus

not seen

touch long-press

not seen

pen hover

not seen

event log

relevant markup

<a interestfor="card" href="...">trigger</a>
<div id="card" popover="hint">...content...</div>

// In JS:
a.addEventListener("interest", e => {
  // No PointerEvent. The browser already decided the user showed interest.
});
a.addEventListener("loseinterest", e => { /* hide / cleanup */ });

see also