How do I make Bootstrap popover work with HTML content in a seperate element

Question

I am in the process of combining Bootstrap panels with Bootstrap popover functionality. The goal is to show a popover when the user hovers the panel's header. I've already got this to work, except that the data-content="" part becomes quite unmanageable when it has a lot of HTML inside.

Below is some sample HTML I am working with. The part that says "LOADS OF HTML" contains div's, table's, p's, etc.

<div class="panel panel-default">
    <div class="panel-heading">
        <i class="fa fa-briefcase fa-fw"></i> 
        <abbr title="Panel title" data-container="body" data-toggle="popover" 
              data-placement="bottom" data-trigger="hover" data-html="true" 
              data-content="<div>LOADS OF HTML HERE</div>">
          Panel title
        </abbr>
        <div class="col-xs-6 col-md-4 pull-right" style="margin-top: -4px;">
            <!-- some buttons go here -->
        </div>
    </div>
    <!-- /.panel-heading -->
    </div>
    <!-- some panel content goes here -->
</div>

Other Bootstrap plugins solve this issue by allowing you to put the HTML in a separate element and then reference that element with a "data-target" attribute. Unfortunately, Popover does not support this. How do I mimic this behavior without writing element specific JavaScript?

Answer 1

Any text/HTML you want to display in the popover can be added in a DIV which has a display:none; CSS property to it. You can pass a function to the content property of the popover options which gets the content from the hidden DIV. This way one doesn't need to reference by ID and insert script tags.

Here is an example http://jsfiddle.net/wb3n8/

HTML:

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
             <h3 class="panel-title">Panel title 1</h3>

        </div>
        <div class="panel-body">Panel content 1</div>
        <div class="my-popover-content">Here is some hidden content 1</div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
             <h3 class="panel-title">Panel title 2</h3>

        </div>
        <div class="panel-body">Panel content 2</div>
        <div class="my-popover-content">Here is some hidden content 2</div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
             <h3 class="panel-title">Panel title 3</h3>

        </div>
        <div class="panel-body">Panel content 3</div>
        <div class="my-popover-content">Here is some hidden content 3</div>
    </div>
</div>

CSS:

.my-popover-content {
    display:none;
}

Javascript:

$(document).ready(function () {
    popoverOptions = {
        content: function () {
            // Get the content from the hidden sibling.
            return $(this).siblings('.my-popover-content').html();
        },
        trigger: 'hover',
        animation: false,
        placement: 'bottom',
        html: true
    };
    $('.panel-heading').popover(popoverOptions);
});