Если вы хотите использовать поле «richtext» (например, contentEditable и designMode), вы можете заключить слово в <span> и присоединить к нему события mouseover и mouseout. Большим недостатком этого подхода является то, что функции «richtext», которые вам могут не понадобиться, могут вызываться с помощью сочетаний клавиш в некоторых браузерах, даже если вы не предоставляете для них интерфейс, и вам придется фильтровать эти стили либо во время редактирования или после сохранения в <textarea>.
В качестве альтернативы вы можете иметь скрытый (но не display: none, так как это помешает точному измерению) <div>* и обновить его содержимое при изменении <textarea>, оберните слово с помощью <span>, как в опцию выше, и отображать всплывающую подсказку, если смещение позиции курсора относительно <textarea> находится в пределах, которые были бы над <span> относительно скрытого <div>. Чтобы определить положение, вы, вероятно, захотите запустить наблюдатель события mousemove, если в <textarea> есть событие mouseover, и остановить событие mousemove, если в <textarea> есть событие mouseout. .
* Примечание. Чтобы обеспечить правильное позиционирование, этот <div> должен иметь точно такие же стили шрифта, текста, линий и размеров, что и текстовая область, а при зеркалировании содержимого вам необходимо экранировать специальные символы HTML (&, < и >), а также конвертировать новые строки в теги <br>.