How do I destroy all instances of Bootstrap Popover?

Question

I have a single page app using Backbone, and whenever I over over something and then click the "back" button, the popover forever stays.

I want to destroy all instances of popover when a new instance is loaded.

Answer 1

Finding the popovers that are created through the data API is not difficult and has been covered in other answers like those of David Mulder and Amir Popovich. You just do:

$("[data-toggle='popover']").popover('hide');

Or you can use destroy if you need to or prefer to.

The challenge is to handle those popovers that are created dynamically.

Marking the Elements with Popovers

I would implement something like this. I'd override the default popover method and I'd try to perform this override as early as possible so that everything that needs a popover uses my override. What it does is just mark elements that use a popover with a class. Bootstrap does not mark them itself:

// Override popover so as to mark everything that uses a popover.
var old_popover = $.fn.popover;
function my_popover() {
  this.addClass('marked-as-having-a-popover');
  return old_popover.apply(this, arguments);
}
$.fn.popover = my_popover;

Then to clear everything before the unloading, I'd put in the code that detects the unloading the following:

$(".marked-as-having-a-popover").popover('hide');

Or it could use destroy rather than hide if testing shows that it works better for your use-case.

Now, the method above will work if the override happens early enough and you do not have a page where multiple jQueries are loaded. (Yep, this is possible.) I use something similar to deal with tooltips in one of my applications so I know the principle is sound. It so happens that in my app, all tooltips are created by my code so there is no risk of missing something.

Finding All Elements with Popovers, Even Unmarked

If you are in a situation where a popover can be created without being marked (I call this an "escapee"), then you need to query the whole DOM and find which elements have popovers. There is no shortcut here. You cannot rely on attributes like data-content because popovers can be created wholly dynamically (i.e. without any of the data- attributes). Also, all kinds of elements can get popovers, so you cannot reliably assume that only button elements will have a popover. The only surefire way to find everything that needs handling is to look at each element in the DOM and check whether it has a popover:

// Obviously this is quite expensive but in a situation where there *can* be escapees
// then you have to check all elements to see if they have a popover.
$("*").each(function () {
    // Bootstrap sets a data field with key `bs.popover` on elements that have a popover.
    // Note that there is no corresponding **HTML attribute** on the elements so we cannot
    // perform a search by attribute.
    var popover = $.data(this, "bs.popover");
    if (popover)
        $(this).popover('hide');
});

Again, destroy could be used rather than hide.

Proof of Concept

Here is a fiddle that illustrates the entire thing:

• "Add a Dynamic Popover" simulates code that would add a popover when the override is in effect.

• "Add an Escapee" simulates code that would add a popover and somehow manage to use the original Bootstrap code.

• "Clear Marked" clears only the marked popovers.

• "Clear All" clears every single popover marked or not.