javascript - カーソルがその上にあるときに、この 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

プラグインのドキュメントによると、ツール ヒントが消える前に遅延を設定できます。

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

ここで他の構成オプションを参照してください。

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

Answer 4

手がかりのヒントプラグインを試してみてください。つまり、下のリンクからのスティッキーオプション-

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

このプラグインは使いやすく、多くの設定オプションも利用できます。