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

Question

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

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

谢谢！

Answer 1

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

或者，您可以隐藏（但不是display: none，因为这会阻止准确衡量）<div> *并在<textarea>更改时更新其内容，请用如上面的选项中<span>，如果光标位置相对于<textarea>的偏移量在<span>相对于隐藏<div>的范围内，则显示工具提示。要确定位置，如果mousemove上有mouseover个事件，您可能想要启动<textarea>事件观察员，如果有mousemove事件则停止mouseout事件{1}}上的{1}}事件。

*注意：为了确保正确定位，此<textarea>应具有与textarea完全相同的字体，文本，线条和维度样式，并且在镜像内容时，您需要转义HTML特殊字符（<div>，&和<），以及将新行转换为>代码。

Answer 2

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

Answer 3

没有直接的方法为特定的单词执行此操作，您可以将其用于整个textarea