【发布时间】：2011-02-24 11:53:41
【问题描述】：
所以我有一个包含文本的文本区域。当我的鼠标悬停在文本区域内的某个单词时，我希望能够显示工具提示。
这可能吗？我希望看到一个不使用任何第三方 javascript 库的解决方案。
谢谢！
【问题讨论】：
标签： javascript html textarea tooltip
【发布时间】：2011-02-24 11:53:41
【问题描述】：
如果您愿意使用“富文本”字段（例如contentEditable 和designMode），您可以用<span> 包裹单词并附加mouseover 和mouseout 事件。这种方法的最大缺点是，即使您不为某些浏览器提供界面，您可能不想要的“富文本”功能也可以通过键盘快捷键调用，并且您需要在编辑时过滤这些样式或保存到<textarea> 之后。
或者，您可以隐藏（但不是display: none，因为这会妨碍准确测量）<div>* 并随着<textarea> 的变化更新其内容，用<span> 包装单词，如如果光标位置相对于<textarea> 的偏移在<span> 相对于隐藏<div> 的范围内，则显示工具提示。要确定位置，如果<textarea> 上存在mouseover 事件，您可能需要启动mousemove 事件观察器，如果<textarea> 上存在mouseout 事件，则停止mousemove 事件.
* 注意：为了确保正确定位，这个<div> 应该与textarea 具有完全相同的字体、文本、线条和尺寸样式，并且在镜像内容时您需要转义HTML 特殊字符（@ 987654341@、< 和 >)，以及将新行转换为 <br> 标签。
【讨论】：
除非您使用 contentEditable 富文本编辑器，否则您可能必须创建一些代码来模仿文本区域的布局并将单词与鼠标范围相关联以确定将鼠标悬停在特定文本上，或者您可以在选择一些文本。
【讨论】：
对于 in 中的特定单词没有直接的方法，您可以将它用于整个 textarea
【讨论】：