Twitter Bootstrap Popup ignores delay even with click-trigger

Question

From the question/answer below, I understand that the hide option does not work when you call .popover("show") in JavaScript.

Twitter Bootstrap Popup ignores delay

But isn't it supposed to work when the popover is triggered by a mouse click?

In the jsFiddle below, you may click on the text and the popover is showed. But it does not hide after the delay.

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

.

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

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

Is it expected that the delay does not work in this case (and if yes, in which case does this option work)?

Answer 1

Be patient :) The delay time is in milliseconds and also work for your fiddle. Use longer times, click once and wait (10 seconds) and click again and wait 10 seconds again:

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

Delay settings won't work if you set the trigger to manual (see: How can I use 'manual' as a trigger option for popovers in the Twitter Bootstrap framework?)

Answer 2

The hide option of Bootstrap is not an auto-hide delay -> unfortunately, the user has to click to hide the popover. After that click the hide option of bootstrap will delay the hiding.

If you want the popover to auto-hide, use the following code. It defines a new jQuery function that places a bootstrap popover with auto-hide.

/****** 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);
        });
    }
});

Basically, it activates an additionnal function as soon as the popover is shown. That function calls jQuery setTimeout to call a third function 3000ms later. That 3rd function closes the popover.

The usage is very simple:

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