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.
... continue reading