demo · v140

Stacked Annotations

Four overlapping custom highlights — grammar, style, fact-check, tone — over the same paragraph. Hover the paragraph and the tooltip shows every highlight at the cursor, top-of-stack first. Pre-140 you had to layer DOM spans and recover them with elementsFromPoint.

grammar style fact-check tone

The renderer firstly processes every input event sequentially, applying changes to the document tree at a rate of approximately sixty hertz, which broadly speaking is fast enough for the eye to perceive it as continuous motion.

const hits = document.highlightsFromPoint(e.clientX, e.clientY);
// → [{ highlight: Highlight, range: Range }, ...]
for (const hit of hits) tip.add(highlight.name, hit.range.toString());

see also