web-dev-qa-db-ja.com

bootstrapでのポップオーバー遅延は機能しません

しばらくしてポップオーバーを隠したい。私はこれをコーディングしました-> [〜＃〜] code [〜＃〜] 仕事。

[〜＃〜] js [〜＃〜]

$('#qoo').popover({
    placement : 'left',
    html : true,
    delay: { 
             show: 500, 
             hide: 100
    },
    content: function() {
    return $('#content-wrapper1').html();
}

}）;

[〜＃〜] html [〜＃〜]

<div class="span1 offset1">
     <a href="#" id="qoo" rel="popover" data-original-title="TITLEEEE" class="circle"> textttt</a>
     <div id="content-wrapper1" class="content-wrapper"> texttttttat</div> 
</div>

しかし、それは機能しません。

jquerytwitter-bootstrappopover
12
yaylitzis

遅延表示/非表示は、ポップオーバーを自動的に表示/非表示にしません。遅延beforeを定義します。また、 遅延は手動トリガータイプには適用されません なので、hoverのようなトリガーが必要です。遅延を機能させるため。

$('#qoo').popover({
    placement : 'right',
    html : true,
    trigger : 'hover', //<--- you need a trigger other than manual
    delay: { 
       show: "500", 
       hide: "100"
    },
    content: function() {
        return $('#content-wrapper1').html();
    }
});

ただし、ポップオーバーを自動的に非表示にするには、shown.bs.popoverイベントにフックして次のようにします。

$('#qoo').on('shown.bs.popover', function() {
    setTimeout(function() {
        $('#qoo').popover('hide');
    }, 1000);
});

上記は、1000ミリ秒、1秒後にポップオーバーを非表示にします。

36
davidkonrad

私はあなたのコードを試しましたが、あなたのコードの問題は、ツールチップがボディ内にバインドされていないように見え、実際にはボディの外に出ていることです。したがって、要素のマージンを残しておくと、ツールチップを機能させることができます。正しく。これをみて ：

JSFiddle

HTML：

<div class="span1 offset1" style="margin:100px">
     <a href="#" id="qoo" rel="popover" data-original-title="TITLEEEE" class="circle"> textttt</a>
     <div id="content-wrapper1" class="content-wrapper"> texttttttat</div> 
</div>

JS：

$('#qoo').popover({
    placement : 'right',
    html : true,
    delay: { 
             show: 500, 
             hide: 500
    },
    content: function() {
    return $('#content-wrapper1').html();
}                 

});
0
Rahul Gupta

私の解決策：ポップオーバーは、ユーザーがリンクに一定時間カーソルを合わせたときにのみ開きます。

$('.popMonster').popover({
    html: true,
    trigger: 'manual',
    delay: { 
        show: 100, 
        hide: 0
    },
    container: $(this).attr('id'),
    placement: 'auto',
    content: function () {
        $return = '<div class="hover-hovercard"></div>';
    }
}).on("mouseenter", function () {

    var delay_ = (function(){
        var timer_ = 0;
        return function(callback, ms){
            clearTimeout (timer_);
            timer_ = setTimeout(callback, ms);
        };
    })();

    var self = $(this), url = '/myurl/action';

    delay(function(){
        // Get content via ajax:
        $.get(url, function(data) {
            if(data == 'Unauthorized.'){
                location.href = './';
            }else{
                self.attr('data-content', data);
                self.popover("show");
            }
        });
    }, 800 ); // time to wait before call ajax

    self.siblings(".popover").on("mouseleave", function () {
        self.popover('hide');
    });

})
0
Gabriel Glauber