For years, showing extra information on hover meant reaching for JavaScript. A tooltip, a preview card on a profile link, a hovercard on a mention, all of it needed mouseenter and mouseleave listeners, a timeout to avoid flicker, and usually a few patches later for keyboard and touch users who cannot hover at all. In October 2025 Chrome shipped something that changes that: interest invokers. A new HTML attribute, two CSS pseudo classes, and a small JavaScript API let the browser handle the entire hover and focus interaction natively. No more homemade timeout logic, no more forgotten focus states.

The old way: hover UI built by hand

Think about the last hovercard you built. You probably attached a mouseenter listener to a link, set a timeout so the popover would not flash open on a quick pass of the cursor, attached a matching mouseleave listener with its own timeout, and then remembered that none of this works with a keyboard, so you added a focus and blur handler too. On a touchscreen there is no hover at all, so you needed yet another interaction pattern for that. Every project ends up with a slightly different, slightly buggy version of the same logic. Browsers already know when a user is interacting with an element through hover, focus, or a long press. Interest invokers hand that detection back to the browser itself.

HTML: the interestfor attribute

The whole feature starts with one new attribute: interestfor. You add it to a link, a button, or an area element, and set its value to the id of the element you want to control. That target element becomes the thing that reacts when the user shows interest in the invoker.

<button interestfor="preview">Show info</button>
<div id="preview" popover="hint">Here is a quick preview.</div>

Give the target a popover attribute and the browser handles showing and hiding it automatically, on hover, on keyboard focus, and on a long press on touch devices. You do not need a single line of JavaScript for the most basic version of a tooltip or hovercard. Interest invokers also work without a popover on the target, which opens the door to effects that go beyond tooltips, such as previewing a color scheme on a panel before a user commits to it.

CSS: interest-source, interest-target, and interest-delay

Once the relationship exists in the HTML, CSS gets a say in how it looks and feels. Two new pseudo classes let you style both sides of the interaction. The interest-source pseudo class matches the invoker itself while interest is being shown on it, which is useful for highlighting the button or link that triggered the popover. The interest-target pseudo class matches the target element while it is receiving interest, which is useful for entrance animations, borders, or any state that should only apply while the popover is actually open through interest.

button:interest-source {
  background-color: orange;
}

#preview:interest-target {
  border-style: dashed;
}

Timing gets its own set of properties. interest-delay-start controls how long the browser waits before treating a hover or focus as real interest, which avoids popovers flashing open when someone is just moving the mouse across the page. interest-delay-end controls the delay before interest is considered lost, giving the user time to move from the invoker to the popover itself without it disappearing. interest-delay is the shorthand for both.

button {
  interest-delay: 0.5s 0.3s;
}

JavaScript: events and the interestForElement property

For anything more advanced than styling, there is a small but complete JavaScript API. The target element fires an interest event when interest is shown, and a loseinterest event when it is lost. Both come through as an InterestEvent, which carries a source property pointing back to the invoker that triggered it.

const preview = document.getElementById("preview");

preview.addEventListener("interest", (event) => {
  preview.textContent = `Interest shown on ${event.source.textContent}`;
});

preview.addEventListener("loseinterest", () => {
  preview.textContent = "No interest right now.";
});

The relationship between an invoker and its target can also be set entirely from JavaScript, without touching the HTML attribute, through the interestForElement property, available on button, anchor, area, and SVG anchor elements. That makes it easy to check whether a browser supports the feature at all, since you can simply test for the presence of that property before relying on it.

const supported = Object.hasOwn(HTMLButtonElement.prototype, "interestForElement");

Browser support: where things stand

Here the story gets more complicated than usual. Chrome and Edge shipped interest invokers in version 142, in October 2025, so if your users are on a recent Chromium browser, the feature already works for them today. Firefox has not committed to a timeline yet, its official position is defer, though the overall tone from Mozilla has been supportive of the design. Safari is the real sticking point. WebKit has openly opposed part of the proposal, specifically the idea of using a long press to show interest on touchscreens, arguing there is no consistent way to expose that interaction across devices, including things like headsets. That is not a small technical detail still being ironed out, it is a genuine disagreement about the interaction model, and it means nobody can promise interest invokers will land in Safari on any particular date. Realistically, treat this the way you would treat any feature with one major engine holding out. It is usable in Chromium browsers today, worth watching in Firefox, and not something to depend on across the board for a while yet.

Using it today, without waiting for full support

The good news is that none of this needs to be all or nothing. Interest invokers are designed for progressive enhancement. In a browser that does not understand the interestfor attribute, it is simply ignored, and your link or button keeps working exactly as it always did. If you want consistent behavior everywhere right now, there is an official interestfor polyfill on npm that ships the same behavior in browsers that lack native support, at the cost of shipping a bit of extra JavaScript. The sensible path is the same one you would take with any early feature. Add interestfor to your tooltips and hovercards where it makes sense, let supporting browsers handle it natively, add the polyfill if full coverage matters for your project, and keep an eye on Safari's position over the coming months. HTML rarely gets a genuinely new interaction primitive. Interest invokers is a good one, even if not every browser agrees on it yet.