HTML

Living Standard — Last Updated 21 May 2025

1. 1. 6.13 Interest invokers
      1. 6.13.1 The interesttarget attribute
      2. 6.13.2 The InterestEvent interface
      3. 6.13.3 Processing model

6.13 Interest invokers

6.13.1 The interesttarget attribute

The interesttarget attribute on a , area , and button elements allows authors to set up an invoker relationship between the triggering element and a separate target element such as a popover. With this arrangement, when the user shows interest in the triggering element (e.g., by hovering or focusing it), the target element will have an interest event fired on it. If the target is a popover, this will show the popover.

If specified, the interesttarget attribute value must be the ID of an element in the same tree as the element with the interesttarget attribute.

interface mixin InterestInvokerElement {
  [CEReactions] attribute Element? interestTargetElement;
};

The interestTargetElement IDL attribute must reflect the interesttarget attribute.

<button interesttarget=tooltip>
 Click me
</button>
<div popover=hint id=tooltip>
 I will appear when the user shows interest in the button
</div>

Every HTML element has an interest state , initially none , with these potential values:

• none

• partial

• full

6.13.2 The InterestEvent interface

[Exposed=Window]
interface InterestEvent : Event {
  constructor(DOMString type, InterestEventInit eventInitDict);
  readonly attribute Element source;
};
dictionary InterestEventInit : EventInit {
  required Element source;
};

event . source

Set to an interesting element TODO.

The source attribute must return the value it was initialized to.

6.13.3 Processing model

To capture interest , given an HTML element invoker :

1. Assert: invoker is an a , area , or button element.

2. Assert: invoker has the interesttarget attribute specified.

3. Let target be the result of running node 's get the interesttarget -associated element .

4. If target is null, then return.

5. Let continue be the result of firing an event named interest at target , using InterestEvent , with the cancelable attribute initialized to true, and the source attribute initialized to invoker .

6. If continue is false, then return.

7. Set invoker 's interest state to full .

8. If target 's popover attribute is not in the no popover state , then run show popover given target , false, and invoker .

To lose interest , given an HTML element invoker :

1. Assert: invoker is an a , area , or button element.

2. Note: invoker may no longer have the interesttarget attribute specified.

3. Let target be the result of running node 's get the interesttarget -associated element .

4. If target is null, then return.

5. Let continue be the result of firing an event named loseinterest at target , using InterestEvent , with the cancelable and composed attributes initialized to true, and the source attribute initialized to invoker .

6. If continue is false, then return.

7. Set invoker 's interest state to none .

8. If target 's popover attribute is not in the no popover state , then hide popover given invoker , false, true, and false.

TODO / questions:

• Actually invoke the capture/lose algorithms.

• Which algorithm reads the computed style for interest-target-delay?

• Handle removal of the interesttarget attribute, or the element that has it.

• Handle changes of the interesttarget attribute while an element has interest.

• Handle changes to the ID attribute referenced by an interesttarget attribute.