title: How to re-position a Bootstrap Popover after dynamic content insertion?
body: <p>So basically whenever I am loading a <a href="http://getbootstrap.com/javascript/#popovers" rel="noreferrer">Bootstrap Popover</a> with an empty <code>content</code> option and inserting content into it dynamically, the popover loses its correct position.</p>
  
  <p><strong>For example:</strong></p>
  
  <pre><code>$('td.chartSection').each(function () {
      var $thisElem = $(this);
      $thisElem.popover({
          placement: 'top',
          trigger: 'hover',
          html: true,
          container: $thisElem,
          delay: {
              hide: 500
          },
          content: ' '
      });
  });
  
  //After popup is shown, run this event
  $('td.chartSection').on('shown.bs.popover', function () {
      var $largeChart = $(this).find('.popover .popover-content');
  
      //Insert some dummy content
      $largeChart.html("dfjhgqrgf regqef  f wrgb wrbgqwtgtrg &lt;br /&gt; wfghjqerghqreg fbvwqbtwfbvfgb &lt;br /&gt;efgwetrg");
  });
  </code></pre>
  
  <p><strong>My Question:</strong></p>
  
  <p>Is there a method that can recalculate the popovers position such as <code>$('td.chartSection').popover('recalculate')</code>.</p>
  
  <p>Or is there another way to re-position the popover without manually doing this with CSS styles?</p>
  
  <p><a href="http://jsfiddle.net/4MUTr/2/" rel="noreferrer"><strong>WORKING DEMO</strong></a></p>