How to re-position a Bootstrap Popover after dynamic content insertion?
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...
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')