Can Bootstrap 3 popovers use an external div for content?

Question

All of the examples here http://getbootstrap.com/javascript/#popovers use inline content for the popovers with the data-content attribute.

What I'd like to do is set up a hidden div on my page with the content, and target that from the popover trigger, like:

<div id="myPopoverContent">
   ...stuff...
</div>

and then

<a ng-href="" data-toggle="popover"><span class="badge">12</span> You have 12 messages.</a>

as the trigger. But how to trigger?

send an ajax call and then on success trigger click programmatically — Ehsan Sajjad, Apr 24 '14 at 15:22
possible duplicate of [Is it possible to use a div as content for Twitter's Popover](http://stackoverflow.com/questions/8875376/is-it-possible-to-use-a-div-as-content-for-twitters-popover) — pennstatephil, Apr 24 '14 at 15:23
I saw that post, it wasn't quite what I was looking for though. — Steve, Apr 25 '14 at 02:11

score 18 · Accepted Answer · answered Apr 24 '14 at 15:29

18

Use the content option of the popover function to pass the content:

{
    content: $('#myPopoverContent').text()
}

To be able to use HTML content, use:

{
    content: $('#myPopoverContent').html(),
    html: true
}

I’ve prepared a working example for you.

answered Apr 24 '14 at 15:29

1

Just a note: you do not need `data-toggle="popover"` or the click event when using the `.popover(options)` function. But nice work otherwise! +1 http://jsfiddle.net/7ekRN/2/ – Tricky12 Apr 24 '14 at 16:34
I know. I just didn’t want to mess with the OP’s HTML. – Raphael Schweikert Apr 24 '14 at 16:48
Nice. Can this be generalize so I only can have one jquery function that simply calls a div named in the trigger element? Let's say I create `data-pop="#myDiv"` to call `div id="myDiv"` and a different data-pop attribute for a different div -- using the same jQuery handler. I'd rather not have a handler for every popover if I can help it. Thanks. – Steve Apr 25 '14 at 02:11
3

Yes, this should work if you make the `content` option [a function](http://jsfiddle.net/7ekRN/4/): `{content: function() { return $(this.dataset.pop).html(); }), html: true}`. – Raphael Schweikert Apr 25 '14 at 05:35
Fantastic, thanks. There was an error with brackets or parens when I tried to add your code, but it ultimately works great: http://pastie.org/9112266 – Steve Apr 25 '14 at 14:36
saved my behind today. Thanks! – TeaCoder Aug 15 '16 at 19:34

1 Answers1