Bootstrap Popover Destroy & Recreate Works Only Every Second Time

I want to programmatically destroy & recreate a specific Bootstrap popover. So what I do is: $('#popoverspan').popover('destroy'); $('#popoverspan').popover({placement : 'botto

Solution 1:

Solved it myself. Apparently .popover('destroy') is asynchronous, and immediate creation of another popover fails, while the previous one is being destroyed. I tried adding delay by using alert, which failed for some reason. Using setTimeout() before creating new popover is not the most elegant, but working solution:

$('#popoverspan').popover('destroy');
setTimeout(function () {
    $('#popoverspan').popover({
        placement : 'bottom', 
        trigger : 'hover', 
        content : 'Here is new popover!'
    });
}, 200);

200 ms seems enough, but it may need finetuning in other cases.

Solution 2:

I had the same problem as described here. After an extensive search, I found a way to change the contents of the popover without having to destroy it first. Just initialize the popover without the content option specified.

$('#popoverspan').popover({
    placement : 'bottom',
    trigger : 'hover', 
});

Notice that above popover initialization does not specify the content. The popover cannot be shown yet, it has no content. Now specify the condition which then leads to different type of texts displayed in the popover.

if (condition_1) {
    $("#popoverspan").data('bs.popover').options.content = "Something important here!"
}
else {
    $("#popoverspan").data('bs.popover').options.content = "This is also important!"
}

Now we are ready to show the popover.

$("#popoverspan").popover('show');

This worked for me as of Bootstrap 3.0. Of course, when you are ready, you can always destroy or hide your popover as usual when the appropriate event happens on your page.

Update: If you just need to change the text in popover after the popover is already displayed, you can essentially use the same technique. 1)Get a hold of the DOM that popover is attached then change the content and 2)show popover again. Example below:

$("#popoverspan").data('bs.popover').options.content = "some new text";
$("#popoverspan").popover('show');

Solution 3:

setting 'animation': false fixed it for me

Solution 4:

@Deniz answer is great, but if you want to change the title/content after popover has been displayed and you are in older Bootstrap versions (mine is 3.3.1), you should use $('.your_popover_target').data('popover').options.content = "new text" instead of .data('bs.popover'), followed by $('.your_popover_target').popover('show');

Solution 5:

I tried the setTimeout approach and for some reason it didn't worked, then I took a deeper look into the popover object, and actually there is a destroy() method that worked just fine. E.g.:

var popover = $.data($('#popoverspan'), "bs.popover");
popover.destroy();