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?

score 31 · Accepted Answer · edited Sep 21 '16 at 14:23

31

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.

edited Sep 21 '16 at 14:23

István

5,057
10
38
67

answered Dec 07 '14 at 17:05

Polakko

788
1
6
12

1

Dangit! This was driving me crazy. I never thought it would be an async call. Thanks for the heads up! – Nick Tiberi Dec 14 '16 at 15:28
I also guess it is an async call.. and now you validate this guess. Very hard and takes at least 2 hours of me:( – phil May 17 '17 at 06:12
Thanks for saving me! I have spent hours on this! – Top-Bot Oct 23 '17 at 16:35

score 11 · Answer 2 · edited Dec 13 '17 at 08:38

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

score 2 · Answer 3 · answered May 16 '18 at 02:16

2

setting 'animation': false fixed it for me

answered May 16 '18 at 02:16

Michael Kardzhilov

31
3

score 0 · Answer 4 · answered Apr 07 '17 at 20:16

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

score 0 · Answer 5 · answered Dec 14 '17 at 18:30

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();

score 0 · Answer 6 · answered Jun 28 '21 at 13:33

0

This worked for me in Bootstrap 5:

const toggler = document.querySelector('#popoverspan');
const popover = bootstrap.Popover.getInstance(toggler);
if (popover) {
    popover.dispose();
}
new bootstrap.Popover(toggler, options);

answered Jun 28 '21 at 13:33

Rick Mohr

1,821
1
19
22

Bootstrap popover destroy & recreate works only every second time

6 Answers6

Linked