How to re-position a Bootstrap Popover after dynamic content insertion?

Question

So basically whenever I am loading a Bootstrap Popover with an empty content option and inserting content into it dynamically, the popover loses its correct position.

For example:

$('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 <br /> wfghjqerghqreg fbvwqbtwfbvfgb <br />efgwetrg"); }); 

My Question:

Is there a method that can recalculate the popovers position such as $('td.chartSection').popover('recalculate').

Or is there another way to re-position the popover without manually doing this with CSS styles?

WORKING DEMO

Answer 1

Using Bootstrap v3.3.7:

You can extend the Popover constructor to add support for a re-positioning function. You can place this script below where you load bootstrap.

JSFiddle Demo

<script src="bootstrap.js"></script> <script type="text/javascript"> $(function () {     $.fn.popover.Constructor.prototype.reposition = function () {         var $tip = this.tip()         var autoPlace = true          var placement = typeof this.options.placement === 'function' ? this.options.placement.call(this, $tip[0], this.$element[0]) : this.options.placement          var pos = this.getPosition()         var actualWidth = $tip[0].offsetWidth         var actualHeight = $tip[0].offsetHeight          if (autoPlace) {             var orgPlacement = placement             var viewportDim = this.getPosition(this.$viewport)              placement = placement === 'bottom' &&                 pos.bottom + actualHeight > viewportDim.bottom ? 'top' : placement === 'top' &&                 pos.top - actualHeight < viewportDim.top ? 'bottom' : placement === 'right' &&                 pos.right + actualWidth > viewportDim.width ? 'left' : placement === 'left' &&                 pos.left - actualWidth < viewportDim.left ? 'right' : placement              $tip                 .removeClass(orgPlacement)                 .addClass(placement)         }          var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight)          this.applyPlacement(calculatedOffset, placement)     } }) </script> 

Then in your script whenever you need to reposition your tooltip after inserting content. You can just call:

$element.popover('reposition') 

Answer 2

No, there isn't a recalculate and there's really no easy way to do it. That said, you can dynamically inject the popovers this way:

$('td.chartSection').on('mouseenter', function() {     var myPopOverContent = 'This is some static content, but could easily be some dynamically obtained data.';     $(this).data('container', 'body');     $(this).data('toggle', 'popover');     $(this).data('placement', 'top');     $(this).data('content', myPopOverContent);     $(this).popover('show'); });  $('td.chartSection').on('mouseout', function() {     $(this).popover('hide'); }); 

Just replace all of your js in your fiddle with the above and check it out...