Javascript 自动隐藏引导弹出窗口

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

---

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

在请求帮助之前，您确实应该尝试一下并发布代码。这是可行的，尽管可能有一种更有效的方法：

$（'.pop'）.popover（）。单击（函数（）{
setTimeout（函数（）{
$（'.pop'）.popover（'hide'）；
}, 2000);
});

单击我
接受的答案很好，但这里有一种更为自举的方法：

原始答案

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


从limplash更新

这个答案遗漏了一个关键信息！！您必须在初始化popover时添加触发器选项。。{触发器：“手动”}。。否则，引导程序会附加一个onclick事件，该事件会导致首次使用后出现“需要两次单击”的问题。。以下是建议的解决方案

您还可以将自己的新数据属性添加到弹出框中，如下所示：

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


你的文字

在显示数据超时中指定的毫秒数后，popover将消失。
我认为，当同一页面上有多个popover元素时，这将无法完美工作。问题是第一个弹出窗口何时打开，因为在代码中它会隐藏其他弹出窗口。但是当一个打开，而您打开第二个时，第一个超时将执行，它将在打开后立即关闭第二个，因为代码将在2秒钟后隐藏所有弹出窗口。我遇到了这种情况。@sforsandeep您只需要添加一个指向原始jQuery对象的中间变量。出于几个原因，这似乎工作得不太好。1） 这不是悬停状态。2） 当它消失时，您必须单击一次以重置它，然后再次单击以激活它。3） 当光标在弹出显示中移动时，它不会保持向上。虽然此答案已被接受，但它忽略了一个关键信息！！您必须在初始化popover时添加触发器选项。。{触发器：“手动”}。。否则，引导程序会附加一个onclick事件，该事件会导致首次使用后出现“需要两次单击”的问题。。下面应该是一个建议的解决方案……`$（“#元素”）.popover（{trigger:“manual”}）。单击（function（）{var pop=$（this）；pop.popover（“show”）pop.on（'show.bs.popover'，function（）{setTimeout（function（）{pop.popover（“hide”）}），2200；}）`@limplash，也许这与Bootstrap 2或3无关。你指的是Bootstrap 4吗？这很好，但在popover自动关闭后，需要单击两下才能再次打开它。“我想popover仍然认为它是开着的，有什么办法吗？”NateBunney，是的，我也注意到了。解决方案是销毁popover并重新初始化。我将尝试更新我的答案。此答案遗漏了一个关键信息！！您必须在初始化popover时添加触发器选项。。{触发器：“手动”}。。否则，引导程序会附加一个onclick事件，该事件会导致首次使用后出现“需要两次单击”的问题。。下面应该是一个建议的解决方案……
$（“#元素”）.popover（{trigger:“manual”}）。单击（function（）{var pop=$（this）；pop.popover（“show”）pop.on（'show.bs.popover'，function（）{setTimeout（function（）{pop.popover（“hide”）}，2200）；}）
limplash的解决方案非常有效。非常感谢！别忘了“on”最好让过滤器支持更改UI-my 2美分$（document）.on（'show.bs.popover'，'data toggle=“popover”][data timeout]”，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>