我可以让这个 jQuery 工具提示在我的光标悬停在它上面时保持打开状态吗？

Question

http://onehackoranother.com/projects/jquery/tipsy/

假设我将鼠标悬停在某物上。工具提示出现在链接上方。当我将鼠标移至工具提示时，它就会消失。有办法保持下去吗？

我问这个问题的原因是因为我想在工具提示内放置一个按钮。我不希望当我点击按钮时它消失。

Answer 1

请检查以下代码 jquery.tipsy.js 文件

从第 61 行开始

function() {
    $.data(this, 'cancel.tipsy', false);
    var self = this;
    setTimeout(function() {
        if ($.data(this, 'cancel.tipsy')) return;

        var tip = $.data(self, 'active.tipsy');
        if (opts.fade) {
            tip.stop().fadeOut(function() { 
                $(this).remove();   
            });
        } else {
            tip.remove();
        }
}, 100); // <- change 100 to 1000

将指示行上的“100”更改为“1000”。

Answer 2

此功能不是内置的，但通过手动显示和隐藏醉酒（使用 trigger: 'manual' 和 $.hover() 来自行添加它并不难）。下面的代码虽然有点长，但应该可以正常工作。

$('.some-class-name').each(function () {

    var me = this,
        timer = null,
        visible = false;

    function leave() {
        // We add a 100 ms timeout to give the user a little time
        // moving the cursor to/from the tipsy object
        timer = setTimeout(function () {
            $(me).tipsy('hide');
            visible = false;
        }, 100);
    }

    function enter() {
        if (visible) {
            clearTimeout(timer);
        } else {
            $(me).tipsy('show');
            // The .tipsy object is destroyed every time it is hidden,
            // so we need to add our listener every time its shown
            $('.tipsy').hover(enter, leave);
            visible = true;
        }
    }

    $(this).tipsy({html: true, trigger: 'manual'});
    $(this).hover(enter, leave);

});

Answer 3

尝试线索提示插件。即下面链接中的粘性选项 -

http://plugins.learningjquery.com/cluetip/demo/< /a>

这个插件很容易使用，并且还有很多配置选项可用。

Answer 4

根据插件文档，您可以在工具提示消失之前设置延迟，请尝试：

$("#element").tipsy({ delayOut: 2000 }); // delay before hiding tooltip (ms)

在此处查看其他配置选项：

http://onehackoranother.com/projects/jquery/tipsy/#options