Interest invokers
Interest invokers, registered by the interestfor HTML attribute, trigger events and actions on a target element when a user shows interest in the element, through behaviors such as hover, focus, or long-press. Pseudo-elements apply styles to sources and targets of interest. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
Interest invokers, registered by the interestfor HTML attribute, trigger events and actions on a target element when a user shows interest in the element, through behaviors such as hover, focus, or long-press. Pseudo-elements apply styles to sources and targets of interest. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
:interest-source Experimental | 142 | 142 | | | 142 | |
| HTML attribute | ||||||
interestfor Experimental Non-standard | 142 | 142 | | | 142 | |
interestfor Experimental Non-standard | 142 | 142 | | | 142 | |
interestfor Experimental Non-standard | 142 | 142 | | | 142 | |
| DOM API | ||||||
interestForElement Experimental Non-standard The interestForElement property of the HTMLAnchorElement interface gets or sets the target element of an interest invoker, in cases where the associated a element is specified as an interest invoker. | 142 | 142 | | | 142 | |
interestForElement Experimental Non-standard The interestForElement property of the HTMLAreaElement interface gets or sets the target element of an interest invoker, in cases where the associated area element is specified as an interest invoker. | 142 | 142 | | | 142 | |
interestForElement Experimental Non-standard The interestForElement property of the HTMLButtonElement interface gets or sets the target element of an interest invoker, in cases where the associated button element is specified as an interest invoker. | 142 | 142 | | | 142 | |
interest_event Experimental Non-standard The interest event of the HTMLElement interface is fired on an interest invoker's target element when interest is shown, allowing code to be run in response. | 142 | 142 | | | 142 | |
loseinterest_event Experimental Non-standard The loseinterest event of the HTMLElement interface is fired on the target element of an interest invoker when interest is lost, allowing code to be run in response. | 142 | 142 | | | 142 | |
InterestEvent Experimental Non-standard The InterestEvent interface represents an event that fires when interest is shown or lost on an interest invoker. | 142 | 142 | | | 142 | |
InterestEvent Experimental Non-standard The InterestEvent() constructor creates a new InterestEvent object. | 142 | 142 | | | 142 | |
source Experimental Non-standard The source read-only property of the InterestEvent interface is an Element object instance that represents the interest invoker element on which interest was shown or lost to fire the event. | 142 | 142 | | | 142 | |
interestForElement Experimental Non-standard The interestForElement property of the SVGAElement interface gets or sets the target element of an interest invoker, in cases where the associated a element is specified as an interest invoker. | 142 | 142 | | | 142 | |
| Other | ||||||
css.selectors.interest-target Experimental | 142 | 142 | | | 142 | |
svg.elements.a.interestfor Experimental Non-standard | 142 | 142 | | | 142 | |
Syntax
<button interesttarget="tooltip">Show on hover</button>
<div id="tooltip" popover="hint">
Tooltip content
</div>Live demo
Interest-based trigger idea
Show a pattern where UI opens when user interest is inferred rather than explicitly clicked.
Why it is delicate
Interest-based UI can feel helpful or distracting depending on timing and accessibility.
Design rules
Provide explicit control and keep interest-based reveals dismissible and keyboard friendly.
Use cases
Control document behavior
Use Interest invokers to influence loading, metadata, or script behavior at the document level.
Tune performance strategy
Apply Interest invokers when earlier resource hints or document settings improve startup or runtime behavior.
Cautions
- Test Interest invokers in your target browsers and input environments before depending on it as a primary behavior.
- Provide a fallback path or acceptable degradation strategy when support is still limited.
Accessibility
- Make sure Interest invokers supports the intended task without making the page harder to perceive, understand, or operate.
Related links
Powered by web-features