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: I'm a newbie at jQuery, so I'm not sure how to write this up myself. I'm sure this is an easy snippet of code, but can't wrap my head around it.

What I'm looking to do is use a data- element (eg: data-class or similar) to attach a new class (Or ID, I'm not picky anymore!) to the top-level popover <div>. The code I currently have is as follows:

jQuery:

$('a[rel=popover]')
    .popover({
        placement : 'bottom',
        trigger : 'hover'
    })
    .click(function(e) {
        e.preventDefault()
    });

HTML:

<a href="" rel="popover" data-class="dynamic-class" title="Title goes here" data-content="Content goes here">

And ideally the kind of HTML I would have spit out, is something like this:

<div class="popover ... dynamic-class">
    <!-- remainder of the popover code as per usual -->
</div>

Is this something I can do? The documentation on the bootstrap site for popovers is a bit sparse, so it's taken me a while just to get to this point, unfortunately :(

Thanks in advance for any & all responses!

Answer 1

You can do this without hacking Bootstrap and without changing the template either, by grabbing the popover object from the caller's data and accessing its $tip property.

$('a[rel=popover]')
  .popover({ placement: 'bottom', trigger: 'hover' })
  .data('bs.popover')
  .tip()
  .addClass('my-super-popover');

Answer 2

There is another way to do this in version 2.3 that is quite simple actually. You override the default template to include the class to the container.

var pop = $('a', this.el).popover({
  trigger: 'click'
  , template: '<div class="popover awesome-popover-class"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
});

Answer 3

Based on what @bchhun wrote and a lot of head scratching, I felt I should answer my own question, as I got it working. I also noticed this had been favourited and liked, so I hope I'm helping someone else who is a newbie at jQuery like myself.

In the current Bootstrap build [v2.1.0], the scripts are all consolidated. So if you have included all of the scripts in your build (and not edited any new lines/taken some out), then head to line 1108 of the un-minified .js file. You'll find the following bit of code:

$tip
  .css(tp)
  .addClass(placement)
  .addClass('in')

You're going to be adding a new line to this, which is:

  .addClass(this.$element.attr("data-class"))

So now whenever you add data-class to the popover call, it will add the attribute to the <div class="popover"> div.

Now that I see it, it's so obvious :)