悬停时的jQuery工具提示

Question

我需要一个非常轻量级的工具提示,类似于http://www.history.com/videos中的1,当你在"热门视频"下悬停视频链接时,工具提示逐渐消失,它会停留在那里你可以甚至在其上选择文本,直到您将光标移离它.当您将鼠标悬停在标记上时,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您想要鼠标悬停的元素在哪里显示工具提示,并且#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");
});

添加更多功能,你最终会得到优秀的qTip插件,我建议你看一下.