Javascript 自动隐藏引导弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14528442/
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
Auto hide bootstrap popover
提问by Gonzalo
I want to hide automatically the Bootstrap popovers after a few seconds. When the user hovers over a control, the popover must be displayed, but if the user doesn't move the mouse pointer, this popover must be hidden automatically after few seconds.
我想在几秒钟后自动隐藏 Bootstrap 弹出窗口。当用户将鼠标悬停在控件上时，必须显示弹出窗口，但如果用户不移动鼠标指针，则该弹出窗口必须在几秒钟后自动隐藏。
That is important because in a mobile phone or tablet when the user taps a control, the popover is displayed, and the focus remains on the same control while the user types something, with the popover hindering it.
这很重要，因为在手机或平板电脑中，当用户点击控件时，会显示弹出窗口，并且在用户键入内容时焦点仍停留在同一个控件上，而弹出窗口会阻碍它。
回答by isherwood
You really should give it a try and post your code before asking for help. This works, though there may be a more efficient method:
在寻求帮助之前，您真的应该尝试一下并发布您的代码。这有效，尽管可能有更有效的方法：
$('.pop').popover().click(function () {
setTimeout(function () {
$('.pop').popover('hide');
}, 2000);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span class="pop" data-original-title="My popover" data-content="Isn't it great?">Click me</span>回答by Adrian Enriquez
The accepted answer works just fine, but here's a more bootstrap approach:
接受的答案工作得很好，但这里有一个更引导的方法：
Original answer
原答案
$('.pop').on('shown.bs.popover', function () {
var $pop = $(this);
setTimeout(function () {
$pop.popover('hide');
}, 2000);
});
Update from limplash
来自 limplash 的更新
This answer misses one key information!! you have to add the trigger option while initializing popover .. {trigger:"manual"} .. otherwise the bootstraps attaches an onclick event to which causes the issue of two click required after first use .. following should is a proposed solution
这个答案漏掉了一个关键信息！！您必须在初始化 popover 时添加触发器选项 .. {trigger:"manual"} .. 否则引导程序附加一个 onclick 事件，导致首次使用后需要两次点击的问题..以下应该是建议的解决方案
$("#element").popover({ trigger:"manual" }).click(function() {
var pop = $(this);
pop.popover("show")
pop.on('shown.bs.popover',function() {
setTimeout(function() {
pop.popover("hide")}, 2200);
})
})
回答by Roel Vermeulen
You could also add your own new data-attribute to your popovers as such:
您还可以将自己的新数据属性添加到弹出窗口中，如下所示：
$('[data-toggle="popover"][data-timeout]').on('shown.bs.popover', function() {
this_popover = $(this);
setTimeout(function () {
this_popover.popover('hide');
}, $(this).data("timeout"));
});
Now you could use
现在你可以使用
<span
data-toggle="popover"
data-timeout="2000"
title="A title"
data-content="Some explanatory text">
Your text
</span>
and the popover disappears after being shown the number of milliseconds you specified in data-timeout.
在显示您在数据超时中指定的毫秒数后，弹出窗口消失。
