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

此功能不是内置的，但通过手动显示和隐藏tipsy（使用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

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

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

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

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

Answer 4

尝试使用cluetip插件。即粘性选项，来自以下链接 -

http://plugins.learningjquery.com/cluetip/demo/

此插件易于使用，并且还提供了许多配置选项。

当我的光标结束时，我可以让这个jQuery工具提示保持开启吗？

4 个答案: