How can I use "div" in Twitter's Popover with multiple buttons?

Question

This solution is ok for one button cases: Is it possible to use a div as content for Twitter's Popover

But in my page I have a bunch of popovers (say 50-100).
So I need to modify this solution.

This wa @jävi's solution:

$(document).ready(function(){
  $('.danger').popover({ 
    html : true,
    content: function() {
      return $('#popover_content_wrapper').html();
    }
  });
});

Each of my button has its own id.

<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_div1" style="display: none">
  <div>This is your div content</div>
</div>

<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_div2" style="display: none">
  <div>This is your div content</div>
</div>

So how can I rewrite this javascript code snippet to cover all my buttons?

Answer 1

Just fought with this myself. You need to put the id in the element that triggers the popover. Use a custom data attribute like so (called 'data-id'):

<a class='danger' data-id="popover_div1" data-placement='above' title="Popover Title" href='#'>Click</a>

Then you can modify your javascript slightly to grab the data-id attribute value programmatically:

$(document).ready(function(){
  $('.danger').popover({ 
    html : true,
    content: function() {
      return $($(this).attr('data-id')).html();
    }
  });
});