1

現在、次のコードを使用して、Bootstrap ツールチップの遅延初期化バージョンを初期化しています。最初のホバーの後、遅延に関してはすべて正常に機能しますが、最初のホバーではすぐに表示されます。これは方法によるものであることは$(this).tooltip('show');知っていますが、遅延と表示を同時に使用する方法がわかりません。$(this).tooltip('show');一度要素をホバリングすると、移動して元に戻らない限り、ツールチップが表示されないため、を使用する必要があります。

$(element).on('hover', '.item', function () {
    matchup = ko.dataFor(this).Matchup;

    if (matchup) {
        if ($(this).attr('data-original-title') != '') {
            $(this).tooltip({ title: matchup.Title, html: true, delay: 1000 });
            $(this).tooltip('show');
        }
    }
});

更新された回答

  $(element).on('mouseenter', '.item', function (e) {

               matchup = ko.dataFor(this).Matchup;

                if (matchup) {

                    if ($(this).attr('data-original-title') != '') {

                            $(this)
                                .addClass('tooltip-init')
                                .tooltip({ title: matchup.Title, html: true, delay: { show: 1000, hide: 0 } })
                                .trigger(e.type);
                }
            });
4

2 に答える 2

1

トリガーを使ってみる

次のコードを試してください

$(this).tooltip({ 
    title: matchup.Title, 
    html: true, 
    trigger: 'hover',
    delay:  delay: { show: 2000, hide: 3000 }
}).trigger('hover');
于 2014-04-27T04:44:05.057 に答える
1

遅延を使用してホームズの回答を見つけましたが、確実ではありませんでした。一連のアイテムを移動すると、ホバーが表示されなくなったように見えました。Sherbrow によるこのjsfiddle につながる別のスタックオーバーフローの回答の助けを借りて、コードを簡素化し、この jsfiddleで動作するようにしました。以下の簡略化されたコード:

var enterTimeout = false;
$('[rel="tooltip"]').tooltip({trigger:'manual'}).on('mouseenter', function() {
    var show = function(n) {
        enterTimeout = setTimeout(function(n) {
            var isHovered = n.is(":hover"); 
            if (isHovered) n.tooltip('show');
            enterTimeout = false;
        }, 750);
    };
    if(enterTimeout) clearTimeout(enterTimeout);
    show( $(this) );
});

$('[rel="tooltip"]').on('mouseout click',function() {
    $(this).tooltip('hide');
});
于 2014-06-20T15:26:16.457 に答える