demo · v140
Overlap Tooltip
The chromestatus motivation: comments, search results, and spelling errors all live as custom CSS highlights and they overlap. document.highlightsFromPoint(x, y) returns the stack so you can build a tooltip that lists every highlight under the cursor.
This page registers three CSS Custom Highlights — comment, search-match, spell-error — across the document below. Mouse over the highlighted runs. Outside Chrome 140 the highlights still render via ::highlight() but the point query falls back to a manual range walk.
The chromestatus motivation talks about overlapping highlights being one of the gnarlier corners of the custom highlight API. A search match inside a comment thread is a real-world example — the user moves the mouse over the text and sees both a comment indicator and a search result indicator at the same position.
The same is true of recieved spelling suggestions overlapping with a passage someone is actively commenting on. Without highlightsFromPoint the page would have to walk every registered highlight, test its range against the cursor, and dedupe — every mousemove.
Move the mouse over the highlighted spans. The tooltip lists every highlight the point hits.
const hits = document.highlightsFromPoint(x, y);
// returns an array of { highlight, range } entries
for (const { highlight, range } of hits) {
if (highlight === commentHighlight) showComment(range);
if (highlight === searchHighlight) scrollToMatch(range);
}