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?

Answer 1

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.