即使点击触发，Twitter Bootstrap Popup 也会忽略延迟答案

【问题标题】：Twitter Bootstrap Popup ignores delay even with click-trigger即使点击触发，Twitter Bootstrap Popup 也会忽略延迟
【发布时间】：2013-10-24 08:13:13
【问题描述】：

从下面的问题/答案中，我了解到当您在 JavaScript 中调用 .popover("show") 时，隐藏选项不起作用。

Twitter Bootstrap Popup ignores delay

但是当鼠标点击触发弹出框时它不应该工作吗？

在下面的 jsFiddle 中，您可以单击文本并显示弹出框。但延迟后并没有隐藏。

$("#clickMe").popover({
    content: "Hello world",
    delay: { show : 100 , hide : 1000 }
});

   <span id="clickMe">Click me</span>

http://jsfiddle.net/ahmed002/cwpB9/

预计延迟在这种情况下不起作用（如果是，在这种情况下该选项是否起作用）？

【问题讨论】：

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

【解决方案1】：

请耐心等待 :) 延迟时间以毫秒为单位，也适用于您的小提琴。使用更长的时间，单击一次并等待（10 秒）然后再次单击并再次等待 10 秒：

$("#clickMe").popover({
            content: "Hello world",
            delay: { show : 10000 , hide : 10000}
      });

如果您将触发器设置为手动，延迟设置将不起作用（请参阅：How can I use 'manual' as a trigger option for popovers in the Twitter Bootstrap framework?）

【讨论】：

天啊！！您刚刚帮助我意识到用户必须再次单击才能隐藏弹出框。在我看来，Bootstrap 非常糟糕。谢谢你，巴斯。

【解决方案2】：

Bootstrap 的隐藏选项不是自动隐藏延迟 -> 不幸的是，用户必须单击才能隐藏弹出框。之后点击bootstrap的隐藏选项会延迟隐藏。

如果您希望弹出框自动隐藏，请使用以下代码。它定义了一个新的 jQuery 函数，该函数放置一个带有自动隐藏功能的引导弹出框。

/****** Defines new jQuery functions */
jQuery.fn.extend({
    popoverWithAutoHide: function (popoverText) {
        $(this).popover({
            content : popoverText
        }).on('shown.bs.popover', function () {
            var $this = $(this); // CLosure
            setTimeout(function() {
                 $this.popover("hide");
            }, 3000);
        });
    }
});

基本上，一旦显示弹出框，它就会激活附加功能。该函数调用 jQuery setTimeout 以在 3000 毫秒后调用第三个函数。第三个函数关闭弹出框。

用法很简单：

$("#editButton").popoverWithAutoHide("To edit items, you need to be logged in and have a rank 5 or higher.");

【讨论】：