Question

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

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

Answer 1

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

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

Answer 2

接受的答案很好，但这是一个更自助的方法：

原始回答

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

从limplash更新

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

现在你可以使用

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

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

自动隐藏引导弹出窗口

3 个答案: