您可以悬停并单击的Javascript / CSS工具提示

Question

我正在寻找可以执行以下操作的javascript / css工具提示：

1. 将鼠标悬停在某个页面元素（例如帮助图标）上时显示。
2. 根据浏览器窗口重新定位自己（例如，如果它位于页面的最右侧，它将显示在页面元素的左侧，否则它将显示在它的右侧。这样它赢了不要离开页面。）
3. 您可以将鼠标悬停在工具提示上，它不会消失。这样，您可以选择文本或单击工具提示中的超链接。

我正在使用dojo，但是他们的dijit工具提示似乎非常不灵活，因为它只会产生另一个dijit元素，最常见的是dijit按钮。我宁愿不必引用像jquery或prototype这样的整个其他javascript框架，所以希望有人可以使用一个基本脚本来实现这一点。

Answer 1

不幸的是，Dojo可用的工具提示样式插件远不及其他框架（即：jQuery）。因此，您有三种选择：

重新发明轮子。从其他工具提示脚本中学习，并从头开始构建自己的工具提示。此选项需要最长的开发时间（以及不可避免的跨浏览器错误维护）。

扩展现有插件。您可以为dojo（或者可能是库不可知插件）获取当前工具提示插件，并通过向其添加自己的脚本来扩展其功能。

使用jQuery。其他人已经说了两遍，但让我再说一遍。 jQuery有一个蓬勃发展的插件生态系统，如果开发/维护时间对你真正重要，那么肯定应该考虑jQuery。

Answer 2

如果你决定使用jQuery，qTip是一个很好的jQuery插件，它是非常可配置的，可能会满足你的需求。 http://craigsworks.com/projects/qtip/

Answer 3

再说一次，假设你不介意使用jQuery（它太棒了!!）我玩了几个工具提示并发现这个最好：http://flowplayer.org/tools/tooltip/index.html

具有良好的文档可扩展。查看“位置”配置选项，看看是否符合您的要求。

祝你好运！

Answer 4

我一直在使用几个jQuery插件，包括jQuery TOOLS，Beauty Tips和Cluetip。我认为这三个都符合你的要求。

如果您想知道发生了什么，而不是黑匣子，我建议您使用本教程：

http://www.sohtanaka.com/web-design/simple-tooltip-w-jquery-css/

（并查看评论部分）

Answer 5

dijit.Tooltip documentation给出了两个简单的例子，第一个将工具提示附加到简单的DOM节点似乎可以满足您的需求。第二种情况恰好将工具提示连接到另一个基于dijit的小部件（按钮）。请注意，属性connectId采用dom节点引用或字符串id。请注意，dijit可以通过编程方式使用，也可以使用基于标记的声明。

不同的工具提示实现可能具有不同的功能。除其他外，dijit.Tooltip为屏幕阅读器提供ARIA可访问性，键盘访问，bidi启用以及在节点周围但在屏幕边界内的自动定位。