自动隐藏引导弹出框[关闭]答案

【问题标题】：Auto hide bootstrap popover [closed]自动隐藏引导弹出框[关闭]
【发布时间】：2013-01-09 19:24:22
【问题描述】：

我想在几秒钟后自动隐藏 Bootstrap 弹出框。当用户将鼠标悬停在控件上时，必须显示弹出框，但如果用户不移动鼠标指针，则该弹出框必须在几秒钟后自动隐藏。

这很重要，因为在手机或平板电脑中，当用户点击某个控件时，会显示弹出框，并且在用户键入内容时焦点保持在同一个控件上，而弹出框会阻碍它。

【问题讨论】：

标签： javascript jquery twitter-bootstrap twitter-bootstrap-3 popover

【解决方案1】：

注意：此解决方案是为 Bootstrap 3 编写的。

这可行，但可能有更有效的方法：

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

http://jsfiddle.net/isherwood/Bqq7C/27/

【讨论】：

我不认为，当同一页面上有多个弹出框元素时，这将完美地工作。问题是当第一个弹出窗口打开时，因为在代码中它将隐藏其他弹出窗口。但是当一个打开并且您打开第二个时，第一个超时将执行并且它将在打开后立即关闭第二个，因为代码是在 2 秒后隐藏所有弹出窗口。我遇到了这种情况。
@sforsandeep 你只需要添加一个中间变量指向你原来的jQuery对象jsfiddle.net/franverona/zPdX9
这似乎不太好用，有几个原因。 1）这不是悬停。 2）当它消失时，您必须单击一次以将其重置，然后再单击一次以激活它。 3）当光标在弹出显示中移动时，它不会保持向上。
认为这个答案被接受它错过了一个关键信息！您必须在初始化弹出窗口时添加触发选项 .. {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); }) })`
@limplash，也许这与 Bootstrap 2 或 3 无关。您指的是 Bootstrap 4 吗？

【解决方案2】：

接受的答案工作得很好，但这里有一个更引导的方法：

原答案

$('.pop').on('shown.bs.popover', function () {
    var $pop = $(this);
    setTimeout(function () {
        $pop.popover('hide');
    }, 2000);
});

从 limlash 更新

这个答案漏掉了一个关键信息！！您必须在初始化 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); 
  }) 
})

【讨论】：

这很好，但是在弹出框自动关闭后，需要单击两次才能再次打开。我认为弹出框仍然认为它是打开的，有什么解决办法吗？
@NateBunney，是的，我也注意到了。解决方案是销毁弹出框并重新初始化。我会尝试更新我的答案。
这个答案漏掉了一个关键信息！！您必须在初始化弹出窗口时添加触发选项 .. {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); }) })
limplash 的解决方案很有魅力。非常感谢！

【解决方案3】：

您也可以像这样将自己的新数据属性添加到弹出框：

$('[data-toggle="popover"][data-timeout]').on('shown.bs.popover', function() {
    this_popover = $(this);
    setTimeout(function () {
        this_popover.popover('hide');
    }, $(this).data("timeout"));
});

现在你可以使用

<span 
    data-toggle="popover" 
    data-timeout="2000" 
    title="A title" 
    data-content="Some explanatory text">
    Your text
</span>

并且弹出框在显示您在 data-timeout 中指定的毫秒数后消失。

【讨论】：

不要忘记“on”最好让过滤器支持更改 UI - 我的 2 美分 $(document).on('shown.bs.popover', '[data-toggle ="popover"][data-timeout]', function() { this_popover = $(this); setTimeout(function () { this_popover.popover('hide'); }, $(this).data("timeout" )); });