悬停时的jQuery工具提示 [英] jQuery tool tip on hover
问题描述
我需要一个非常轻量级的工具提示,类似于此处的 http://www.history.com /视频当您将视频链接悬停在热门视频下时,工具提示会逐渐消失,它会停留在那里,您甚至可以选择文本,直到您将光标移开。当您将鼠标悬停在标记上时,Facebook和Google+也有类似的样式工具提示以及堆栈溢出。有人可以提供轻量级的方法来做到这一点。
I am in need of a very lightweight tooltip similar to the 1 found here http://www.history.com/videos when 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.
我有搜索并查看了许多现有的插件,但它们都有些臃肿。感谢您的帮助
I have search and looked at many existing "plugins" they are all somewhat bloated though. Thanks for any help
推荐答案
以下是一种非常简单的方法:
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);
其中 #tip
是你想要的元素鼠标悬停以显示工具提示, #tooltip
是实际的工具提示元素。
Where #tip
is the element you want to mouseover to make the tooltip appear, and #tooltip
is the actual tooltip element.
这是一个例子:< a href =http://jsfiddle.net/pvyhY/> http://jsfiddle.net/pvyhY/
如果你想把它包装在一个jQuery插件中:
If you wanted to wrap this in a jQuery plugin:
(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");
});
添加更多功能,最终你会得到优秀的qTip插件,我建议也看一下。
Add more functionality and you'll eventually end up with the excellent qTip plugin, which I recommend taking a look at as well.
这篇关于悬停时的jQuery工具提示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!