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

Question

因此,基本上每当我使用空选项加载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 <br /> wfghjqerghqreg fbvwqbtwfbvfgb <br />efgwetrg");
});

我的问题:

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

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

工作演示

Answer 1

使用Bootstrap v3.3.7:

您可以扩展Popover构造函数以添加对重定位功能的支持.您可以将此脚本放在加载引导程序的位置下方.

JSFiddle演示

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

然后在您的脚本中,只要您在插入内容后需要重新定位工具提示.你可以打电话:

$element.popover('reposition')

Answer 2

window.dispatchEvent(new Event('resize'));

这对我有用。

Answer 3

我刚刚打过电话

button.popover('show');

它重新定位了它.

Answer 4

不,没有重新计算,实际上并没有简单的方法.也就是说,你可以用这种方式动态注入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并检查出来......

Answer 5

我有一个类似的情况，我有一个已经包含一些 HTML（加载微调器）的弹出窗口，并且当 ajax 调用返回时我正在更改内容。在我的 ajax 回调函数中，这是我用来更改定位的代码，因此它保持居中：

var originalHeight = $(popover).height();

$(popover).find('.popover-content').html(data);

var newHeight = $(popover).height();
var top = parseFloat($(popover).css('top'));
var changeInHeight = newHeight - originalHeight;

$(popover).css({ top: top - (changeInHeight / 2) });