[英]jQuery tool tip on hover
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.我需要一个非常轻量级的工具提示,类似于在此处找到的 1 http://www.history.com/videos当您 hover “热门视频”下的视频链接时,工具提示会淡入到位,它会停留在那里,您可以甚至 select 文本,直到您将 cursor 移开。 Facebook and Google+ also have a similar style tool-tip as well as stackoverflow when you hover over a tag.
当您在标签上使用 hover 时,Facebook 和 Google+ 也有类似样式的工具提示和 stackoverflow。 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);
Where #tip
is the element you want to mouseover to make the tooltip appear, and #tooltip
is 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 插件,我建议您也看看。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.