Question

从下面的问题/答案中，我了解当您在JavaScript中调用.popover（“show”）时，hide选项不起作用。

但是当鼠标点击触发弹出窗口时，它是不是应该可以工作？

在下面的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的隐藏选项不是自动隐藏延迟 - ＆gt;不幸的是，用户必须单击以隐藏弹出窗口。之后单击bootstrap的hide选项将延迟隐藏。

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

用法非常简单：

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

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

2 个答案: