v149 · Web APIs · DOM · OpaqueRange

Inline Annotation

Select text in the textarea, add a note, and watch the annotation tooltip appear precisely above that text span using OpaqueRange.getBoundingClientRect() — the geometry API Chrome 149 adds to form controls.

OpaqueRange / createValueRange() is not detected in this browser. The demo will fall back to simulating the position using selection offsets. Chrome 149+ is needed for native OpaqueRange geometry.
Select text in the editor to annotate it
Annotations 0 annotations
No annotations yet — select text above and click "+ Annotate selection"

the geometry API

// Chrome 149: get pixel rect for a substring of a textarea's value
const textarea = document.querySelector('textarea');
const range = textarea.createValueRange(12, 18); // characters 12–18

const rect = range.getBoundingClientRect();
// { top, left, right, bottom, width, height }
// → exactly where that text span renders on screen

// Position a tooltip above the selection
tooltip.style.left = `${rect.left + rect.width / 2}px`;
tooltip.style.top  = `${rect.top - 8}px`;  // 8px above

// The range is live — updates on scroll, resize, content change
range.disconnect(); // free when done

see also