Bootstrap 4 popper 在滚动或窗口调整大小时移动左上角的边框

Question

在带有数据表和 bootstrap4 的新管理页面中，我们为每一行实现了一个 poper。它在大多数情况下都能完美运行。当我们滚动或调整窗口大小时，弹出窗口会移动到左上角并停留在那里。

我已经尝试了所有可能的配置，例如删除按钮的所有可能的配置和内部组件。

<a data-id="' + data + '" data-toggle="popper"
       data-title="Are you sure?" data-content="This will not be visible on website!">
 <i title="Disable Item" data-toggle="tooltip" class="nav-icon i-Power-2 rounded-circle"></i>
</a>

我使用数据表的 fnDrawCallback 来初始化 popper。

fnDrawCallback: function(){
    $('[data-toggle="popper"]').popover({
        container: "body",
    });
}

当 popper 位于正确位置时的 HTML 代码

fnDrawCallback: function(){
    $('[data-toggle="popper"]').popover({
        container: "body",
    });
}

跳转到左上角后的HTML

<div 
    class="popover fade show bs-popover-left" 
    role="tooltip" 
    id="popover230546" 
    x-placement="left" 
    style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(880px, 556px, 0px);">

    <div class="arrow" style="top: 28px;"></div>
    <h3 class="popover-header">Are you sure?</h3>
    <div class="popover-body">"This will not be visible on website!</div>
</div>

观察 在 Bootstrap 3 实现中，popper 作为元素插入到触发锚点/行附近，而在 Bootstrap 4 中，popper 作为主体中的最后一个元素插入。

如何让它粘在触发链接/行上？