Dynamically add a class to Bootstrap's 'popover' container

Question

I\'ve thoroughly searched through both StackOverflow and Google, but come up empty. So apologies in advance if this has been asked & resolved already.

NB

Answer 1

This has been asked a few years ago, and there are plenty of answers. But... I recently had to tackle the same problem myself, and I - (a) wanted to avoid manipulating source code and (b) needed a generic solution to be reused constantly (so using the template: '...' solution for each initialization was out).

My solution was simple enough, and is sort of the same as the marked answer - I figured popover is an extension of the tooltip.js library. I mean - check it out, the source code is barely more than a hundred lines. So I created a file called popover-extend.js, and copy-pasted the entire popover source code in. From there it was easy - simple manipulate these lines:

Popover.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
    // add this:
    cls: ''
});

then:

Popover.prototype.setContent = function () {
    // add this:
    if (this.options.cls) {
        $tip.addClass(this.options.cls);    
    }

Now you can do:

It's a really good approach if you're like me and want to add more functionality. for example, here's how I added a generic close button to the title (though it requires the popover to have a specified id):

// added this to the the DEFAULTS
close: ''


// added this to the setContent function
if (this.options.close) {
    var id = this.$element.attr('id'),
        btn = $("", {
            "class": "close",
            "id": "close",
            "onclick": "$('#"+id+"').popover('hide');"
    }),

    title = $tip.find('.popover-title');

    btn.html("×");
    btn.appendTo(title);
}

The cool thing about it, is that everything you set in the DEFAULTS can be configured via html, i.e. if you add a variable named foo, you will be automatically able to manipulate it through data-foo=.

Hope this helps anyone looking for an alternative to manipulating source code