Home

What is popover=hint?

Published on

If you’ve been following along with advancements in HTML, such as the new popover API, you may have noticed that a new popover type (hint) recently landed in Chrome 133 (January 2025). But what exactly does it do?

The short answer is: popover="hint" allows you to open an unrelated hint popover without closing other popovers in the stack. This means you can have an existing stack of auto popovers remain open while still displaying a hint popover.

You often see this sort of behavior in tooltips that might contain additional information, or link previews. An example is the profile preview card on Twitter when you hover over someone’s profile picture in the Twitter timeline, or the list of folks who liked a post on Facebook when you hover over the “Comments” button. If you had another popover open, such as the Facebook chat in the bottom right corner of the web UI, popover="hint" is ideal because opening the hint popover wouldn’t close the other one.

The three types of popovers

popover=autopopover=manualpopover=hint
Light dismiss (via click-away or esc key)YesNoYes
Closes other popover=auto elements when openedYesNoNo
Closes other popover=hint elements when openedYesNoYes
Closes other popover=manual elements when openedNoNoNo
Can open and close popover with JS (showPopover() or hidePopover())YesYesYes
Default focus management for next tab stopYesYesYes
Can hide or toggle with popovertargetactionYesYesYes
Can open within parent popover to keep parent openYesYesYes

Demo time

In the following demo there are two popovers: one opens on the three-dot menu, and the other when you show interest in the comments link. The menu popover is an auto popover and the comment popover is a hint popover.

<div id="popover--comments" popover="hint">
 ...
</div>

...
<button popovertarget="popover--comments">24 comments</button>
...
See demo on Codepen.

But wait, didn’t clicking on the hint popover close the auto one?

Yes, very astute! Because you’re inducing an action (click), it activates the light-dismiss of the auto popover. This is almost certainly not what you want when you’re creating a hint popover.

The truth is, popover="hint" only gets us part of the way there.

For the rest, you’ll need to write some JavaScript event listeners (for now…).

const hintBtn = document.querySelector("#hint-popover-btn");
const hintPopover = document.querySelector("#hint-popover");

// Mouse (hover) events
hintBtn.addEventListener("mouseenter", (event) => {
  hintPopover.showPopover();
});

// Adding a timeout delay in this one for users to have time to interact before the popover hides
hintBtn.addEventListener("mouseleave", (event) => {
  setTimeout(
    () => {
      if (! hintPopover.matches(':hover')) {
        hintPopover.hidePopover()
      }
    }
  , 100);
});

// Keyboard (tab) events
hintBtn.addEventListener("focus", (event) => {
  hintPopover.showPopover();
});

hintBtn.addEventListener("blur", (event) => {
  hintPopover.hidePopover();
});

// No support for touch events

Now, invoking the comment popover:

  1. Doesn’t close the menu popover (preserves its open state)
  2. Is opened via hover (does not require click)

But wait that’s not all!

We also want this to work on a link (not just a button). popovertarget only supports button elements for the invoker. But in practice, a hint popover is often applied to a link, which provides dual interactions.

For example, clicking through the “24 comments” link would show the comments, but “showing interest” in it (i.e. hovering or focusing) would preview who had commented on it. Since we’re writing JavaScript to open and close the popover, this is now possible.

See demo on Codepen.

To make this more declarative, and more accessible (I didn’t factor in multiple hover targets in the code above, for example), what we really need are interest invokers.

Interest invokers

Interest invokers are currently an experimental API that you can try out by turning on the #experimental-web-plaform-features flag in Chrome Canary.

“Rather than being activated via a click on the element, this API uses a lighter way for the user to “show interest” in an element without fully activating it.” See explainer

This means, that rather than requiring a button click, you can hover with a mouse, tab to on keyboard, or show interest via a to be determined behavior on mobile (but likely long press may be one of the form factors).

Unlike standard popovers, which can only be triggered with a button, you can apply an [interestfor] on a link as well, enabling that link to have a dual-action (click through on click/enter, and show the interest popover on hover/focus).

Let’s see it in action

Now, we can get the exact same effect as above, without any JavaScript, in a way that’s built in to the browser’s native rendering engine.

<div id="popover--comments" popover="hint">
 ...
</div>

...
<a interestfor="popover--comments" href="#">24 comments</a>
...
[interestfor] {
  /* make this animate in and out a little faster than the default */
  interest-show-delay: 0.1s;
  interest-hide-delay: 0.1s;
}

And that’s really it!

See demo on Codepen.

I’ve got a few more interest invoker demos in this Codepen collection that will get updated as the spec evolves and the behavior is finalized. Much more to come!

To learn more about [interestfor] and new properties that come along with it, such as interest-delay, check out my talk from Google I/O at 39:00, but keep in mind, the rename happened after this event, so the property names have changed.

Conclusion

TLDR; popover=hint (Chromium 133+) and [interestfor] (behind a flag in Canary) are about to make building layered UI elements that are currently really hard to implement much easier.

Learn more:

Thank you to Scott O’Hara for the accessibility review of the demo in this post!