hover时的jQuery工具提示

我需要一个非常轻量级的工具提示，类似于http://www.history.com/videos中的1，当你在“热门video”下hovervideo链接时，工具提示逐渐消失，它会停留在那里你可以甚至可以选择文本，直到您将光标移开。 当您将鼠标hover在标签上时，Facebook和Google+也有类似的样式工具提示以及堆栈溢出。 有人可以提供轻量级的方法来做到这一点。

我搜索并查看了许多现有的“插件”，但它们都有些臃肿。 谢谢你的帮助

Answer 1

这是一个非常简单的方法，你可以完成这个：

var timeout; function hide() { timeout = setTimeout(function () { $("#tooltip").hide('fast'); }, 500); }; $("#tip").mouseover(function () { clearTimeout(timeout); $("#tooltip").stop().show('fast'); }).mouseout(hide); $("#tooltip").mouseover(function () { clearTimeout(timeout); }).mouseout(hide); 

其中#tip是您要鼠标hover的元素，以显示工具提示， #tooltip是实际的工具提示元素。

这是一个例子： http ： //jsfiddle.net/pvyhY/

---

如果你想将它包装在一个jQuery插件中：

 (function($) { $.fn.tooltip = function(tooltipEl) { var $tooltipEl = $(tooltipEl); return this.each(function() { var $this = $(this); var hide = function () { var timeout = setTimeout(function () { $tooltipEl.hide(); }, 500); $this.data("tooltip.timeout", timeout); }; /* Bind an event handler to 'hover' (mouseover/mouseout): */ $this.hover(function () { clearTimeout($this.data("tooltip.timeout")); $tooltipEl.show(); }, hide); /* If the user is hovering over the tooltip div, cancel the timeout: */ $tooltipEl.hover(function () { clearTimeout($this.data("tooltip.timeout")); }, hide); }); }; })(jQuery); 

用法：

 $(document).ready(function() { $("#tip").tooltip("#tooltip"); }); 

添加更多function，你最终会得到优秀的qTip插件 ，我建议你看一下。

Answer 2

这是另一个使用名为Tiptip的JQuery插件的Facebook风格工具提示。 以下链接是完整的工作示例。 下面的链接中还提供了提示下载链接。

http://kahimyang.info/kauswagan/HowtoBlogs.xhtml?b=527

它是为JSF / PrimeFaces观众编写的。 只需用“$”替换对“JQuery”的引用即可。 该howto使用内置的PrimeFaces JQuery。 对于非PrimeFaces用户，您需要在tiptip之前加载JQuery。