自动隐藏bootstrap popover

我想在几秒钟后自动隐藏Bootstrap popovers。 当用户将鼠标hover在控件上时，必须显示弹出窗口，但如果用户未移动鼠标指针，则必须在几秒钟后自动隐藏此弹出窗口。

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

Answer 1

你真的应该尝试一下并在寻求帮助之前发布你的代码。 这可行，但可能有一个更有效的方法：

$('.pop').popover().click(function () { setTimeout(function () { $('.pop').popover('hide'); }, 2000); }); 

    Click me 

Answer 2

接受的答案工作正常，但这是一个更自助的方法：

原始答案

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

---

从limplash更新

这个答案错过了一个关键信息！ 你必须在初始化popover时添加触发器选项.. {trigger：“manual”} ..否则bootstraps附加一个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); }) }) 

Answer 3

您还可以将自己的新数据属性添加到弹出窗口中：

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

现在你可以使用了

  Your text  

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