v149 · Web APIs · demo

Word Tooltip

Click or double-click any word in the text field. OpaqueRange locates the word's pixel bounds with createValueRange(start, end).getBoundingClientRect(), and a tooltip is positioned directly above it — no layout tricks needed.

Checking OpaqueRange support…

Click or double-click a word in the field below.

Also works on <textarea>:

Why this matters

Without OpaqueRange

To position a tooltip over text in a form control, developers had to mirror the text into a hidden <div>, clone the element's exact styles, measure a synthetic Range inside the clone, then calculate offsets — fragile, expensive, and broken by scroll or zoom.

With OpaqueRange (Chrome 149)

Call input.createValueRange(wordStart, wordEnd).getBoundingClientRect(). One line. The browser handles all layout and scroll offsets internally. The result is a standard DOMRect in viewport coordinates.

// Detect word boundaries around a character offset
function wordBounds(value, offset) {
  let start = offset;
  let end   = offset;
  while (start > 0 && /\w/.test(value[start - 1])) start--;
  while (end < value.length && /\w/.test(value[end])) end++;
  return { start, end };
}

// On double-click: find the clicked word, get its rect
input.addEventListener('dblclick', () => {
  const { start, end } = wordBounds(input.value, input.selectionStart);

  // Create a live OpaqueRange for that word
  const range = input.createValueRange(start, end);
  const rect  = range.getBoundingClientRect();
  range.disconnect();

  // Position a tooltip just above the word
  tooltip.style.left    = rect.left + 'px';
  tooltip.style.top     = (rect.top - tooltipHeight - 8) + 'px';
  tooltip.style.display = 'block';
  tooltip.textContent   = input.value.slice(start, end);
});

see also