即使使用点击触发器，Twitter Bootstrap弹出窗口也会忽略延迟

Question

从下面的问题/答案中，我了解到在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/

预计延迟在这种情况下不起作用吗(如果是，在哪种情况下此选项起作用)？

Answer 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?)

Answer 2

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

如果希望popover自动隐藏，请使用以下代码。它定义了一个新的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，以便在3000ms之后调用第三个函数。第三个函数关闭弹出窗口。

用法非常简单：

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