Javascript：显示鼠标悬停在textarea中的某个单词的工具提示

Question

所以我有一个包含文本的textarea。我希望能够显示一个工具提示，当我的鼠标悬停在textarea中的某个单词时。

这可能吗？我宁愿看到一个不使用任何第三方JavaScript库的解决方案。

谢谢！

Answer 1

如果你愿意使用“富文本”字段（例如contentEditable和designMode），您可以用<span>包裹字，并附mouseover和mouseout事件给它。这种方法的一大缺点是，即使您没有为它们提供接口，也可能会在某些浏览器中通过键盘快捷方式调用“richtext”功能，并且您需要在编辑时过滤这些样式或保存到<textarea>后。

或者，你可以有一个隐藏的（但不是display: none，因为这将影响测量精度）<div> *和更新其为<textarea>变化的内容，具有<span>包裹字在上面的选项，显示工具提示如果光标位置的相对于<textarea>的偏移处于将在<span>相对于隐藏的<div>的范围内。如果<textarea>上存在mouseover事件，并且<textarea>上存在mouseout事件，请确定您可能想要启动mousemove事件观察者的位置，并停止mousemove事件。请注意：为了确保正确定位，此<div>应该与textarea具有完全相同的字体，文本，线条和尺寸样式，并且在镜像内容时，您需要转义HTML特殊字符（&， <和>），以及将新行转换为<br>标签。

Answer 2

除非您使用contentEditable富文本编辑器，否则您可能需要创建一些代码来模仿textarea的布局，并将某个词与鼠标范围相关联以确定将鼠标悬停在某个文本上，或者您可以在选择一些文字。

Answer 3

有没有直接的方法来做这个特定的单词，你可以让它为整个textarea