v142 · dom

Interest Invokers (the `interestfor` attribute)

This feature adds an `interestfor` attribute to <button> and <a> elements. This attribute adds "interest" behaviors to the element, such that when the user "shows interest" in the element, actions are triggered on the target element, such as showing a popover. The user agent will handle detecting when the user "shows interest" in the element, via methods suc

concepts

  1. interestfor

    Hover or focus the buttons. Side-by-side: the manual JS-wired tooltip on the left versus the declarative interestfor equivalent on the right.

  2. Wikipedia-Style Link Previews

    The marquee use case: in-flow link hovercards. Each link declares interestfor pointing at a popover. Hover, focus, or touch long-press all surface the card with browser-managed delay and dismiss.

  3. Input Mode Matrix

    One attribute, every input mode. The page tracks which of mouse hover, keyboard focus, touch long-press, and pen hover have fired so far. Bring any device and watch the matrix fill in.

  4. Delay Tuner

    Drag interest-target-show-delay and interest-target-hide-delay sliders. Hover the target, leave it, simulate an accidental hover — see exactly when the browser fires interest and loseinterest, and how the delay defends against drive-by hover triggers.

  5. Rich Tooltip Gallery

    Eight tooltip variants powered by a single interestfor attribute: plain text, styled user card, code snippet, stats table, image with caption, achievement badge, icon button strip, and keyboard shortcut hint. The popover holds any HTML you want.

  6. Form Field Help

    The most common real-world pattern: a signup form where every field has a ? help button that uses interestfor to show a popover with format rules, privacy notes, and live password-strength rules. Comparison table: title vs JS events vs CSS :hover vs interestfor.

why it shipped

The `popover=hint` feature (https://chromestatus.com/feature/5073251081912320, shipped in M133) provides "half" of the features needed to build declarative tooltips, hovercards, and menus. The missing piece is the invocation of those UX elements on hover, keyboard activation, or long-press. This feature fills that gap.

references