If you're willing to use a "richtext" field (eg contentEditable
and designMode
), you can wrap the word with a <span>
and attach mouseover
and mouseout
events to it. The big drawback with this approach is that "richtext" features that you may not want can be invoked with keyboard shortcuts in some browsers even if you don't provide an interface for them, and you'll need to filter those styles either while editing or after saving to a <textarea>
.
Alternatively, you can have a hidden (but not display: none
, as this will prevent accurate measurement) <div>
* and update its content as the <textarea>
changes, wrap the word with a <span>
as in the option above, and display the tooltip if the cursor position's offset relative to the <textarea>
is within bounds that would be over the <span>
relative the hidden <div>
. To determine position you'd probably want to start a mousemove
event observer if there is a mouseover
event on the <textarea>
, and stop the mousemove
event if there is a mouseout
event on the <textarea>
.
* Note: In order to ensure correct positioning, this <div>
should have exactly the same font, text, line and dimensional styles as the textarea, and when mirroring the content you'll need to escape HTML special characters (&
, <
and >
), as well as convert new lines to <br>
tags.