Fizzix Fizzix - 3 months ago 42
CSS Question

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

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

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...