How to fade out a bootstrap popover after 5 seconds?

Question

How can I fade out this popover after 5 seconds? Also, if I click on it, how can I make it hide?

   $('ul.menu.fright').popover({
       'placement':'bottom',
       'content':'Look at me!',
       delay: {show:500, hide:100}
    }).popover('show');

Answer 1

Well, what @Coding Enthusiast has mentioned, will surely do the job for you. And for the same, I just made the fiddle. You can check it out.

What I have done is on the button, but you can replace it

html

<div class="bs-example">
    <button type="button" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="Default popover">Popover</button>
</div>

jquery

$(document).ready(function () {

    $('[data-toggle="popover"]').popover({
        placement: 'bottom',
        delay: {
            "show": 500,
            "hide": 100
        }
    });

    $('[data-toggle="popover"]').click(function () {

        setTimeout(function () {
            $('.popover').fadeOut('slow');
        }, 5000);

    });

});

dont forget the double quote on show and hide ( issue here )

Answer 2

jsfiddle

Listen to the hover event on your ul.menu.fright . Show your popover, then setTimeout to hide it after an amount of time.

//this is with the hover
$('ul.menu.fright').hover(function(){
        $('ul.menu.fright').popover('show');
        tmp = setTimeout(function(){$('.popover').popover('hide')}, 5000);
});

---

I realised my original answer didn't answer your question thoroughly so I tweaked it a little bit. Now it shows automatically on load and it hides after 5 seconds. Shows on click.

jsfiddle 2

$('ul.menu.fright').popover({
    placement: 'bottom',
    delay: {
        show: 500,
        hide: 100
    },
    content:'Look at me!'
}).popover('show');
$('ul.menu.fright').on('shown.bs.popover', function () {

    setTimeout(function() {
        $('.popover').fadeOut('slow',function() {}); 
    },5000);

});
$('#cokepop').click(function () {
    $('#cokepop').popover('show');

});

My JsFiddle two will work wonders but you can improve user experience by hiding the popover if it is shown on click and showing it if it is hidden.

JsFiddle 3

All you have to do is change the onclick event:

$('#cokepop').click(function () {

    if ($("#cokepop").next('div.popover:visible').length){
        $('#cokepop').popover('hide');
    }else{
        $('#cokepop').popover('show');
    }
});