javascript 悬停时的 jQuery 工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6638128/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery tool tip on hover
提问by JasonDavis
I am in need of a very lightweight tooltip similar to the 1 found here http://www.history.com/videoswhen you hover a video link under "Popular Videos", a tooltip fades into place, it stays there and you can even select text on it until you move the cursor off it. Facebook and Google+ also have a similar style tool-tip as well as stackoverflow when you hover over a tag. Can someone provide a light weight method of doing this.
我需要一个非常轻量级的工具提示，类似于http://www.history.com/videos 上找到的 1，当您将视频链接悬停在“热门视频”下时，工具提示会淡入到位，它会停留在那里，您可以甚至选择上面的文本，直到您将光标移开。Facebook 和 Google+ 也有类似风格的工具提示以及当您将鼠标悬停在标签上时的 stackoverflow。有人可以提供一种轻量级的方法来做到这一点。
I have search and looked at many existing "plugins" they are all somewhat bloated though. Thanks for any help
我搜索并查看了许多现有的“插件”，但它们都有些臃肿。谢谢你的帮助
回答by Andrew Whitaker
Here's a pretty simple way you could accomplish this:
这是一个非常简单的方法，你可以做到这一点：
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);
Where #tipis the element you want to mouseover to make the tooltip appear, and #tooltipis the actual tooltip element.
#tip您想要将鼠标悬停以显示#tooltip工具提示的元素在哪里，并且是实际的工具提示元素。
Here's an example: http://jsfiddle.net/pvyhY/
这是一个例子：http: //jsfiddle.net/pvyhY/
If you wanted to wrap this in a jQuery plugin:
如果你想把它包装在一个 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);
Usage:
用法：
$(document).ready(function() {
$("#tip").tooltip("#tooltip");
});
Add more functionality and you'll eventually end up with the excellent qTip plugin, which I recommend taking a look at as well.
添加更多功能，您最终将获得出色的qTip 插件，我也建议您查看一下。
