所以我有一个包含文本的文本区域。我希望当鼠标悬停在文本区域内的某个单词上时能够显示工具提示。
这可能吗？我更希望看到一个不使用任何第三方 javascript 库的解决方案。
谢谢!
最佳答案
如果您愿意使用“富文本”字段(例如 contentEditable 和 designMode )，则可以使用 <span> 将单词括起来。并附上mouseover和mouseout事件到它。这种方法的一大缺点是，即使您没有为它们提供界面，您可能不想要的“richtext”功能也可以在某些浏览器中通过键盘快捷键调用，并且您需要在编辑时过滤这些样式或保存到 <textarea> 后.
或者，您可以隐藏(但不是 display: none ，因为这会妨碍准确测量)<div> * 并将其内容更新为<textarea>更改，用 <span> 将单词括起来如上面的选项所示，如果光标位置相对于<textarea>有偏移，则显示工具提示在超过 <span> 的范围内相对隐藏<div> 。要确定位置，您可能需要启动 mousemove事件观察者如果有 mouseover事件于 <textarea> ，并停止mousemove事件，如果有 mouseout事件于 <textarea> .
*注:为了保证正确定位，此<div>应该与文本区域具有完全相同的字体、文本、线条和尺寸样式，并且在镜像内容时，您需要转义 HTML 特殊字符( & 、 < 和 > )，以及转换新的线路至<br>标签。
关于Javascript:当鼠标悬停在文本区域中的某个单词时显示工具提示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2918434/