我可以將jQuery工具提示停留在光標上方時嗎？

Question

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

假設我將鼠標懸停在某物上。 工具提示出現在鏈接上方。 當我將鼠標移到工具提示時，它消失了。 有辦法保持下去嗎？

我之所以這樣問，是因為我想在工具提示中放一個按鈕。 我不希望單擊按鈕時消失。

Answer 1

該功能不是內置的，但是通過手動顯示和隱藏提示（使用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 2

請檢查以下代碼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 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/

該插件易於使用，並且提供許多配置選項。