jquery - Bootstrap 时的弹出窗口延迟不起作用

Question

我希望弹出窗口在一段时间后隐藏。我编码了这个 -> 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();
    }
});

但是，要实现弹出窗口的自动隐藏，您可以通过 Hook shown.bs.popover 事件来执行以下操作:

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

上面的代码在 1000 毫秒 1 秒后隐藏弹出窗口。