javascript – 悬停时的jQuery工具提示

我需要一个非常轻量级的工具提示,类似于这里发现的1,当你在“热门视频”下悬停视频链接时,工具提示逐渐消失,它停留在那里你甚至可以选择文本,直到你移动光标关闭它.当您将鼠标悬停在标签上时,Facebook和Google也有类似的样式工具提示以及堆栈溢出.有人可以提供轻量级的方法来做到这一点.

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

解决方法

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

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 plugin,我建议你也看看.

原文链接：https://www.f2er.com/jquery/240848.html

javascript – 悬停时的jQuery工具提示

解决方法

猜你在找的jQuery相关文章