Fizzix Fizzix - 5 months ago 59
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

option and inserting content into it dynamically, the popover loses its correct position.

For example:

$('td.chartSection').each(function () {
var $thisElem = $(this);
placement: 'top',
trigger: 'hover',
html: true,
container: $thisElem,
delay: {
hide: 500
content: ' '

//After popup is shown, run this event
$('td.chartSection').on('', 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

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



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);

$('td.chartSection').on('mouseout', function() {

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