Bootstrap popover destroy & recreate works only every second time

Question

I want to programmatically destroy & recreate a specific Bootstrap popover. So what I do is:

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

And it works every second time only. I thought that it's the matter of the time it takes to destroy the popover, but even adding a delay between the two lines doesn't help. I recreated the problem in JSFiddle: http://jsfiddle.net/Lfp9ssd0/10/

Why is it like that? It has been suggested that it works, e.g. in Twitter Bootstrap Popover with dynamically generated content via ajax and Bootstrap Popover Reinitialization (To refresh Content)

It works just fine when I skip the destroying, but I am not sure what happens when I create another popover for an element without destroying the already existing one. Is it reinitialised or does it create a new popover with losing the access to the old one?

Answer 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.

Answer 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');