如何在动态内容插入后重新定位Bootstrap Popover？

因此,基本上每当我使用空选项加载Bootstrap Popovercontent并动态地将内容插入其中时,弹出窗口就会丢失其正确的位置.

例如:

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

我的问题:

有没有一种方法可以重新计算弹出窗口的位置,如$('td.chartSection').popover('recalculate').

或者是否有另一种方法来重新定位popover而不用CSS样式手动执行此操作？

工作演示