title: How do I make Bootstrap popover work with HTML content in a seperate element
body: <p>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 <code>data-content=""</code> part becomes quite unmanageable when it has a lot of HTML inside.</p>
  
  <p>Below is some sample HTML I am working with. The part that says "LOADS OF HTML" contains div's, table's, p's, etc.</p>
  
  <pre><code>&lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
          &lt;i class="fa fa-briefcase fa-fw"&gt;&lt;/i&gt; 
          &lt;abbr title="Panel title" data-container="body" data-toggle="popover" 
                data-placement="bottom" data-trigger="hover" data-html="true" 
                data-content="&lt;div&gt;LOADS OF HTML HERE&lt;/div&gt;"&gt;
            Panel title
          &lt;/abbr&gt;
          &lt;div class="col-xs-6 col-md-4 pull-right" style="margin-top: -4px;"&gt;
              &lt;!-- some buttons go here --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- /.panel-heading --&gt;
      &lt;/div&gt;
      &lt;!-- some panel content goes here --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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?</p>