Introducing the Interest Invoker API: Hover-Triggered Popovers

Chrome 139 is testing the Interest Invoker API from Open UI, aimed at creating tooltips, hover menus, hover cards, and other UI elements for displaying information on hover. This API allows for declarative and hover-triggered components using HTML, with browsers managing the `mouseenter` and `mouseleave` events without JavaScript.

Usage example:

Interest trigger

Although not mandatory, declaring them as popovers ensures correct accessibility hints.

Let’s explore this feature, its current usage, and my thoughts based on experience.

The interest trigger is what users hover over (or long-press on touchscreens) to reveal the target. I’ll refer to it as “trigger” to avoid confusion with the Invoker Commands API. The trigger can be a link, button, or image map area, with the `interestfor` attribute referencing the target’s `id`.

Examples:

Interest trigger

Interest trigger

For popovers, the `interestfor` attribute replaces `popovertarget`. Instead of this:

Interest trigger

We have:

Interest trigger

The interest target is revealed when the trigger is hovered over. It should be a popover, with attributes like `popover`, `hint`, or `manual` to determine dismissal behavior. `popover` attributes can be dismissed lightly, `hint` popovers only close other `hint` popovers, and `manual` popovers are persistent.

Open UI’s current explanation and Chrome’s implementation suggest targets disappear on `mouseleave`, regardless of popover type. This seems counterintuitive, as `manual` popovers should persist. Accessibility should depend on content, not popover type.

Interest invokers are straightforward, aligning with Open UI’s approach of making JavaScript-powered components possible with HTML. JavaScript events like `interest` and `loseinterest` are available for edge cases:

“`javascript
interestTrigger.addEventListener(“interest”, () => {
/* User showed interest */
});

interestTrigger.addEventListener(“loseinterest”, () => {
/* User lost interest */
});
“`

Interest involves a delay for showing/hiding popovers, preventing accidental triggers. In Chrome 139 or Canary, try the demo to experience this.

Interest delays can be adjusted with CSS properties `interest-show-delay` and `interest-hide-delay`. Default is `0.5s`, set on the trigger:

“`css
/* If unobtrusive */
.unobtrusive[interestfor] {
interest-show-delay: 0;
}

/* If keyboard-focused on a trigger */
[interestfor]:focus-visible {
interest-hide-delay: 0;
}

/*
If keyboard-focused within a target of interest,
or target of partial interest (these are always keyboard-triggered),
the interest trigger that currently has interest
or partial interest has the hide delay removed
*/
body:has(:target-of-interest :focus-visible, :target-of-partial-interest) [interestfor]:where(:has-interest, :has-partial-interest) {
interest-hide-delay: 0;
}
“`

Pseudo-selectors like `:has-interest` and `:has-partial-interest` help manage focus and interaction:

– `:has-interest`: Triggers with mouse interest
– `:has-partial-interest`: Triggers with keyboard interest
– `:target-of-interest`: Targets with mouse interest
– `:target-of-partial-interest`: Targets with keyboard interest
– `:target-of-partial-interest::after`: Message for keyboard interest
– `interest-show-delay`: Time before target appears
– `interest-hide-delay`: Time before target disappears
– `interest-delay`: Shorthand for show/hide delay

Interest invokers can also work with anchor elements declaratively.

In conclusion, interest invokers offer hover-triggered popovers, addressing challenges with touchscreens and user errors. Open UI ensures user agents handle much of the complexity. Future considerations include touchscreen interactions and styling. The new `interactivity: not-keyboard-focusable` attribute aids in creating keyboard-friendly