Popover delay at bootstrap doesnt work

Question

I want the popover to hide after a while. I coded this -> CODE work..

JS

$('#qoo').popover({
    placement : 'left',
    html : true,
    delay: { 
             show: 500, 
             hide: 100
    },
    content: function() {
    return $('#content-wrapper1').html();
}                 

});

HTML

<div class="span1 offset1">
     <a href="#" id="qoo" rel="popover" data-original-title="TITLEEEE" class="circle"> textttt</a>
     <div id="content-wrapper1" class="content-wrapper"> texttttttat</div> 
</div>

But it doesn't work.

Answer 1

Delay show / hide does not automatically show / hide the popover, it defines the delays before doing so! Also, delay does not apply to manual trigger type, so you must have a trigger, like hover. to get the delays to work.

$('#qoo').popover({
    placement : 'right',
    html : true,
    trigger : 'hover', //<--- you need a trigger other than manual
    delay: { 
       show: "500", 
       hide: "100"
    },
    content: function() {
        return $('#content-wrapper1').html();
    }
});

However, to achieve automatically hide for the popover, you can do the following by hooking into the shown.bs.popover event :

$('#qoo').on('shown.bs.popover', function() {
    setTimeout(function() {
        $('#qoo').popover('hide');
    }, 1000);
});

The above hides the popover after 1000 ms, 1 second.

Answer 2

I have tried your code, the problem in your code is that the tooltip does not seem be bound within the body, it is actually going outside the body, so if you will leave the margin for the element you would be able to get it working correctly. Take a look at this :

JSFiddle

HTML :

<div class="span1 offset1" style="margin:100px">
     <a href="#" id="qoo" rel="popover" data-original-title="TITLEEEE" class="circle"> textttt</a>
     <div id="content-wrapper1" class="content-wrapper"> texttttttat</div> 
</div>

JS :

$('#qoo').popover({
    placement : 'right',
    html : true,
    delay: { 
             show: 500, 
             hide: 500
    },
    content: function() {
    return $('#content-wrapper1').html();
}                 

});

Answer 3

My solution: Popover opens only when the user hover over the link for a certain amount of time.

$('.popMonster').popover({
    html: true,
    trigger: 'manual',
    delay: { 
        show: 100, 
        hide: 0
    },
    container: $(this).attr('id'),
    placement: 'auto',
    content: function () {
        $return = '<div class="hover-hovercard"></div>';
    }
}).on("mouseenter", function () {

    var delay_ = (function(){
        var timer_ = 0;
        return function(callback, ms){
            clearTimeout (timer_);
            timer_ = setTimeout(callback, ms);
        };
    })();

    var self = $(this), url = '/myurl/action';

    delay(function(){
        // Get content via ajax:
        $.get(url, function(data) {
            if(data == 'Unauthorized.'){
                location.href = './';
            }else{
                self.attr('data-content', data);
                self.popover("show");
            }
        });
    }, 800 ); // time to wait before call ajax

    self.siblings(".popover").on("mouseleave", function () {
        self.popover('hide');
    });

})