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

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

跳转到左上角后的HTML

<div 
    class="popover fade show bs-popover-right" 
    role="tooltip" 
    id="popover230546" 
    x-placement="left" 
    style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(5px, 481px, 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作为主体中的最后一个元素插入。

如何使其固定在触发链接/行上？

Bootstrap 4 Popper在滚动或调整窗口大小时移动左上角的Corbner

0 个答案: