What Is Popover=Hint?

What is popover=hint? 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=auto popover=manual popover=hint Light dismiss (via click-away or esc key) Yes No Yes Closes other popover=auto elements when opened Yes No No Closes other popover=hint elements when opened Yes No Yes Closes other popover=manual elements when opened No No No Can open and close popover with JS ( showPopover() or hidePopover() ) Yes Yes Yes Default focus management for next tab stop Yes Yes Yes Can hide or toggle with popovertargetaction Yes Yes Yes Can open within parent popover to keep parent open Yes Yes Yes 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" > ... ... < button popovertarget = "popover--comments" >24 comments ... 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: Doesn’t close the menu popover (preserves its open state) 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). ⚠️ Note: [interestfor] is still an experimental API. There was a recent syntax change, renaming [interesttarget] to [interestfor] to better align with command invokers. The associated CSS properties were also updated. There is currently also a big open issue around handling touch events for interest invokers. If you want this feature to land, you can add your voice now. 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" > ... ... < a interestfor = "popover--comments" href = "#" >24 comments ... [ interestfor ] { /* make this animate in and out a little faster than the default */ interest-show-delay : 0.1 s ; interest-hide-delay : 0.1 s ; } 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!