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

时间:2011-01-18 05:35:27

标签: javascript jquery html css tipsy

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

假设我将鼠标悬停在某物上。工具提示显示在链接上方。当我将鼠标移动到工具提示时,它会消失。有没有办法保持它?

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

4 个答案:

答案 0 :(得分: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”。

答案 1 :(得分:1)

此功能不是内置的,但通过手动显示和隐藏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);

});

答案 2 :(得分:0)

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

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

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

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

答案 3 :(得分:0)

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

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

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