Published: November 4, 2026
You're looking for a new shirt in an online store, and there's a grid of options. You're curious about the material for one of the shirts, so you click it. You navigate to its page, and realize it isn't what you want. You click the back button, but you've lost context.
Navigating to a new page is a relatively significant change, but interest invokers provide a declarative way to peek into a page without fully committing. They can also provide an additional view on an action.
To use an interest invoker, add the interestfor attribute to the trigger
element with its value pointing to the id of the popover you want to open.
<!-- The trigger element that points to the popover element: -->
<a href="link.html" interestfor="link-preview">Link</a>
<!-- The popover element that is shown when the trigger element is activated: -->
<div popover="hint" id="link-preview">Link Preview</div>
Interest versus action
Interest invokers are somewhat unique to the web platform as a concept. Most events are in response to a user's action that significantly changes the user's context—they clicked a link to a new page, pressed play, or submitted a form.
Interest invokers drive more subtle behaviors. They allow for a temporary state before reverting back to the original state. It's a much lower investment for the user.
The cost of a user accidentally triggering an action can be high—for example, if they lose (or send) a half-written email, or make an unintended purchase. If a user accidentally opens a popover, and then closes it, they will likely only be annoyed or distracted. Because the cost of accidentally triggering a popover is lower, you can make it easier for the user to trigger.
Triggering interest
Interest triggered tooltips open when the browser detects that the user has interest in it, which may be different depending on the user's device.
On devices with keyboards, users show interest by moving their focus to the link
or button that has an interestfor attribute. Interest invokers can only be
triggered by <a> or <button> elements, so the triggers are focusable.
Interest is lost when the user moves the focus to a different link or button
that is outside the popover. You can also press Esc to close the
popover.
On devices with a mouse, users show interest by hovering over the trigger, and then lose interest by moving the mouse anywhere outside of the popover.
In both cases, interest isn't triggered immediately. There's a slight delay to avoid a popover from showing immediately if the user is moving their mouse over a link or moving focus on the way to a different button. Interest is lost after a delay as well.
You can control the start and end delay with the
interest-delay-start,
interest-delay-end
CSS properties, or the
interest-delay
shorthand property. If the delay is too short, users are likely to trigger the
popover accidentally, or not be able to move their mouse to the popover before
it closes. If it's too long, users are less likely to discover the popover. The
default of half a second (0.5s) seems to balance these needs.
Another case to consider is when a user shows interest in multiple items in
quick succession. For example, if they are tabbing through a toolbar with
multiple buttons, you may want the first popover to have a delay, but subsequent
popovers to be shown immediately. Using the :interest-source
pseudo-class,
you can shorten the start delay if any popovers are already open.
#button-wrapper:has(:interest-source) [interestfor] {
interest-delay-start: 0s;
}
There's ongoing debate on how best to show and lose interest on touch screens, where there isn't a clear way (that isn't already used for triggering a share or context menu) for the user to indicate their interest.
UI patterns
While interest invokers are new to the web platform, they offer built-in support for existing patterns, rather than adding new ones. In these cases, there's a button or a link that already does something, but there's a potential second action.
A window rather than a door
With interest triggered tooltips on anchor (<a>) elements, users can choose to
receive more info about a link without needing to navigate to a new page. For
example:
- If a link would take you to a user's profile page, an interest triggered tooltip could show their photo, username, timezone, and whether they're in a meeting.
- If a link would take you to an article on a related topic, an interest triggered tooltip could show a snippet, the author's name, and date it was published.
For some users, this peek at additional info will be enough—they'll get the information they need and succeed at their task without needing to leave the first page. For other users, the additional information will help confirm that they've selected the correct user, or want to read more about the topic, and will click through to the next page. In either instance, if the content meets the user's expectations, the UI pattern is a success.
A door hanger on a door
Interest invokers are also supported on the <button> element. In these cases,
the primary goal of the click is not to navigate, but rather to take some
action.
For example, clicking a response button lets you quickly respond to the content on the page with an emoji. But you may also be interested in knowing who has already responded. Since the click action is already taken, you can use the user's interest to trigger a tooltip with that info.
Another case where this pattern would be useful would be a button with a user's avatar as the content. When you click the button, a menu of actions you can take on the user opens. You can use an interest triggered popover to show additional information about the user. Or when buying tickets to a show, clicking a seat on the theater map would select the seat, but you can use an interest triggered popover to show the user an image of the view from that seat.
In these cases, the page is still functional without the interest invokers, but be careful that the primary user needs can still be met.
Wrap up
Interest invokers provide built-in behaviors to implement useful UX patterns without requiring the user to fully commit to a specific action. However, there's still some work to settle on how to expose this additional functionality on touch screens. For now, it's a good fit if your browser and device requirements match, or if the content in the tooltips are completely secondary and the site is usable without it.
Checklist
- Test your site with a screen reader, and make sure the tooltips are accessible.
- Check the focus order, especially if the popover has items that can be focused.
- Check that the interest delay balances responsiveness and avoiding accidental triggers, and adjust if needed.
- Put the popover element immediately after the trigger if possible.
- Check that users can successfully use the site without the tooltips.
- Consider adding labels to icon buttons, rather than using tooltips for the labels.
- Use Hint popovers for tooltips, and auto and manual popovers for rich popovers.