Question

我想要一段时间后隐藏弹出窗口。我编码了这个 - ＆gt; 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>

但它不起作用。

Answer 1

延迟显示/隐藏不会自动显示/隐藏弹出窗口，它会在之前定义延迟！另外，delay does not apply to manual trigger type，因此您必须拥有触发器，例如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秒后的弹出窗口。

Answer 2

我已经尝试过你的代码了，你的代码中的问题是工具提示似乎没有被束缚在体内，它实际上是在体外，所以如果你将留下元素的边缘，你将能够让它正常工作。看看这个：

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();
}                 

});

Answer 3

我的解决方案：只有当用户将鼠标悬停在链接上一段时间后才会打开。

$('.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');
    });

})

引导程序的弹出延迟不起作用

3 个答案: