自动隐藏Bootstrap Popover

Question

我想要自动隐藏Bootstrap弹出框，在用户悬停控件时，必须显示弹出框，但如果用户不移动鼠标指针，则必须在几秒钟后自动隐藏此弹出框。这很重要因为在移动手机或平板电脑上，当用户轻敲控件时，弹出框被显示，并且焦点仍然停留在相同的控件上，使得用户无法正常输入。

- Gonzalo

Answer 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/

- isherwood

---

我认为，当同一页上有多个弹出元素时，这不会完美地工作。问题在于当第一个弹出窗口打开时，代码会隐藏其他弹出窗口。但是当你打开第二个弹出窗口时，第一个弹出窗口的超时将执行并立即关闭第二个弹出窗口，因为代码是在2秒后隐藏所有弹出窗口。我曾经遇到过这种情况。 - Sandeep Thomas

@sforsandeep 你只需要添加一个指向你原来的jQuery对象的中间变量 http://jsfiddle.net/franverona/zPdX9/ - Fran Verona

这个似乎不太好用，有几个原因：1）这不是悬停状态。2）当它消失后，你必须点击一次重置它，然后再点击第二次才能激活它。3）鼠标在弹出显示器内移动时它不会保持弹出。 - TylerH

虽然这个答案被接受了，但它缺少一个关键信息！在初始化弹出框时，您必须添加触发选项.. {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

@isherwood，是的，我在谈论Bootstrap 4...我想你是正确的，这不是一个问题...但是我想我的评论可以为当前使用Bootstrap 4的用户服务。 - limplash

Answer 2

接受的答案完全可行，但这里有一个更符合 Bootstrap 的方法： 原始答案：

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

---

来自limplash的更新

这个答案缺少一个关键信息！！在初始化弹出框时，您必须添加触发选项 .. {trigger:"manual"} .. 否则Bootstrap会附加一个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); 
  }) 
})

- Adrian Enriquez

---

这很棒，但是在弹出窗口自动关闭后，需要点击两次才能再次打开它。我认为弹出窗口仍然认为它是打开的，有没有解决方法？ - Nate Bunney

@NateBunney，是的，我也注意到了。解决方法是销毁弹出窗口并重新初始化。我会尝试更新我的答案。 - Adrian Enriquez

这个答案缺少一个关键信息！！在初始化弹出框时，您必须添加触发选项.. {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

limplash的解决方案非常完美，非常感谢！ - DrumTim

Answer 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参数指定。

- Roel Vermeulen

---

不要忘记使用过滤器来支持更改用户界面，这是我的建议。$(document).on('shown.bs.popover', '[data-toggle="popover"][data-timeout]', function() { this_popover = $(this); setTimeout(function () { this_popover.popover('hide'); }, $(this).data("timeout")); }); - Demetris Leptos