JavaScript – 动态内容插入后如何重新定位Bootstrap Popover?

前端之家收集整理的这篇文章主要介绍了JavaScript – 动态内容插入后如何重新定位Bootstrap Popover?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以基本上每当我加载一个空的内容选项的 Bootstrap Popover和动态地插入内容,popover失去正确的位置.

例如:

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

我的问题:

有没有一种方法可以重新计算如$(‘td.chartSection’)的popovers位置.popover(‘recalculate’).

还是有另一种方式来重新定位popover,而无需手动使用CSS样式?

WORKING DEMO

解决方法

不,没有一个重新计算,真的没有简单的方法来做到这一点.也就是说,您可以通过以下方式动态地插入这个popovers:
$('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');
});

只要用你的小提琴取代你的所有js,并检查出来…

猜你在找的JavaScript相关文章