Kate Kate - 6 months ago 90
CSS Question

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

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

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 :)