HTML Interest Invokers

HTML interest invokers let the browser react when a user shows or loses interest in an element, such as by hovering, focusing, or long-pressing it. A common use is showing a preview or tooltip popover without writing custom JavaScript event handling.

The relationship is declared with the interestfor attribute. Its value refers to the id of the target element.

Basic Interest Invoker

Example:

<button interestfor="profile-preview">
  Hover or focus me
</button>

<div id="profile-preview" popover="hint">
  Profile preview shown by an interest invoker.
</div>

When the user shows interest in the <button>, the browser can show the linked popover. When interest is lost, the browser hides it according to the platform's interaction rules.

Interest invokers are designed for progressive enhancement. Keep the main control useful even if a browser does not support the feature.

The interestfor Attribute

The interestfor attribute creates a relationship between an invoker and another element.

<a href="/profile" interestfor="profile-card">
  View profile
</a>

<div id="profile-card" popover="hint">
  Short profile preview
</div>

The link remains a normal link. Supporting browsers can additionally show the preview when the user indicates interest.

Use popover="hint" for Tooltips

A target used as a lightweight preview or tooltip can use popover="hint".

Hint popovers are intended for transient supporting information. They can coexist with other popovers more naturally than using only auto popovers.

Add Interest Delays

CSS can delay when interest starts or ends. This is useful because instant hover popovers can feel distracting on dense interfaces.

button[interestfor] {
  interest-delay: 500ms 300ms;
}

The first duration controls the delay before interest activates. The second controls the delay before it is lost.

Style the Interest State

The :interest-source pseudo-class matches the invoker while interest is active. The :interest-target pseudo-class matches the related target.

button:interest-source {
  background-color: #eee;
}

[popover]:interest-target {
  border-style: dashed;
}

These selectors let you style the relationship without maintaining your own JavaScript state.

Position the Popover

An interest-linked popover can also use CSS anchor positioning.

#profile-card {
  position-area: bottom;
}

This places the popover below its implicit anchor in supporting browsers.

Interest Invokers and commandfor

An element can be an interest invoker and still support activation-based commands. For example, a <button> can show a tooltip on interest and open a larger information panel when clicked.

<button
  interestfor="help-tip"
  commandfor="help-panel"
  command="toggle-popover">
  Help
</button>

<p id="help-tip" popover="hint">Quick hint</p>
<div id="help-panel" popover>Detailed help</div>

JavaScript API

Supporting elements expose an interestForElement property. This lets scripts create the same relationship programmatically.

const trigger = document.querySelector("#preview-link");
const preview = document.querySelector("#preview");

trigger.interestForElement = preview;

Interest and lose-interest events can also be used when custom behavior is required.

Common Mistakes

• Replacing normal navigation: a preview should enhance a link, not make the link unusable without the feature.
• Showing popovers too quickly: use interest delays when accidental hover activation is distracting.
• Forgetting keyboard users: test focus interaction, not only mouse hover.
• Putting essential information only in the popover: important content should still be reachable through normal navigation.

Accessibility Advantages

Interest invokers allow the browser to coordinate hover, focus, long-press, and escape behavior instead of requiring every site to recreate those interactions with custom event listeners. This can reduce gaps between mouse and keyboard interaction.

The feature does not remove the need for accessible content design. Labels still need to be meaningful, focus indicators should remain visible, and preview content should not trap users or hide essential information.

Conclusion

Interest invokers bring a common UI pattern into declarative HTML. With interestfor, popovers, delay properties, and interest pseudo-classes, browsers can manage hover- and focus-style previews with less custom JavaScript while preserving accessible native behavior.