12

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?

Community
  • 1
  • 1
trante
  • 33,518
  • 47
  • 192
  • 272

5 Answers5

13

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();
    }
  });
});
Jeff Perrin
  • 8,094
  • 1
  • 23
  • 19
4

If you don't want to pollute your source element with another data-* attribute, here is a simple and generic way to use the data-content attribute as text or CSS selector:

$('[data-toggle="popover"]').popover({
    html: true,
    content: function() {
        var content = $(this).data('content');
        try { content = $(content).html() } catch(e) {/* Ignore */}
        return content;
    }
});

You can now use the data-content attribute with a text value: 

<a data-toggle="popover" data-title="Popover Title" data-content="Text from data-content attribute!" class="btn btn-large" href="#">Click to toggle popover</a>

...or use the data-content attribute with a CSS selector value: 

<a data-toggle="popover" data-title="Popover Title" data-content="#countdown-popup" class="btn btn-large" href="#">Click to toggle popover</a>

<div id="countdown-popup" class="hide">Text from <code>#countdown-popup</code> element!</div>

You can test this solution here: http://jsfiddle.net/almeidap/eX2qd/

...or here, if you are using Bootstrap 3.0: http://jsfiddle.net/almeidap/UvEQd/ (note the data-content-target attribute name!)

almeidap
  • 256
  • 2
  • 11
1

You can do it without additional button attributes like this:

http://jsfiddle.net/isherwood/E5Ly5/

.popper-content {
    display: none;
}

<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content">My first popover content goes here.</div>

<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content">My second popover content goes here.</div>

<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content">My third popover content goes here.</div>

$('.popper').popover({
    container: 'body',
    html: true,
    content: function () {
        return $(this).next('.pop-content').html();
    }
});
isherwood
  • 58,414
  • 16
  • 114
  • 157
0

Store the id of the div containing the popover html inside the rel attribute of the a element

<a rel="popover_div2" ... >click</a>

And then get the rel of the click anchor inside your click listener (not sure how the popover method stores it, but I'm sure it does):

var myRel = $(this).attr(rel);
return $(myRel).html();
Doug Molineux
  • 12,283
  • 25
  • 92
  • 144
0

For me it has do be

data-id="#popover_div1"

in the HTML for the button (with a # for addressing the id of the div).

Bruno
  • 1