jQuery 引导时的弹出延迟不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19397636/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Popover delay at bootstrap doesnt work
提问by yaylitzis
I want the popover to hide after a while. I coded this -> CODEwork..
JS
我希望弹出框在一段时间后隐藏。我编码了这个 - > CODE工作..
JS
$('#qoo').popover({
placement : 'left',
html : true,
delay: {
show: 500,
hide: 100
},
content: function() {
return $('#content-wrapper1').html();
}
});
});
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>
But it doesn't work.
但它不起作用。
回答by davidkonrad
Delay show / hide does not automatically show / hide the popover, it defines the delays beforedoing so! Also, delay does not apply to manual trigger type, so you must have a trigger, like hover. to get the delays to work.
延迟显示/隐藏不会自动显示/隐藏弹出框，它在这样做之前定义了延迟！此外，延迟不适用于手动触发类型，因此您必须有一个触发器，例如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();
}
});
However, to achieve automatically hide for the popover, you can do the following by hooking into the shown.bs.popoverevent :
但是，要实现自动隐藏弹出框，您可以通过挂钩shown.bs.popover事件来执行以下操作：
$('#qoo').on('shown.bs.popover', function() {
setTimeout(function() {
$('#qoo').popover('hide');
}, 1000);
});
The above hides the popover after 1000 ms, 1 second.
以上隐藏了 1000 毫秒，1 秒后的弹出窗口。
回答by Rahul Gupta
I have tried your code, the problem in your code is that the tooltip does not seem be bound within the body, it is actually going outside the body, so if you will leave the margin for the element you would be able to get it working correctly. Take a look at this :
我已经尝试过你的代码，你的代码中的问题是工具提示似乎没有被绑定在正文中，它实际上是在正文之外，所以如果你为元素留下边距，你就可以让它工作正确。看看这个 ：
HTML :
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 :
JS：
$('#qoo').popover({
placement : 'right',
html : true,
delay: {
show: 500,
hide: 500
},
content: function() {
return $('#content-wrapper1').html();
}
});
回答by Gabriel Glauber
My solution: Popover opens only when the user hover over the link for a certain amount of time.
我的解决方案：仅当用户将鼠标悬停在链接上一定时间时才会打开 Popover。
$('.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');
});
})
