In our new admin page with datatables and bootstrap4, we heve implemented a poper for each row. It works perfect on most cases. When we scroll or window is resized, the popper moves to top left corner and stays there.
I have tried all possible configurations like removing all possible configurations and inner componentes for the button.
<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>
I use fnDrawCallback of datatables to initialize popper.
fnDrawCallback: function(){
$('[data-toggle="popper"]').popover({
container: "body",
});
}
HTML code for popper when it is on correct position
<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 after jumping to top left
<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>
Observation In bootstrap 3 implementation, the popper is inserted as element near the triggering anchor/row, where as in Bootstrap 4, the popper is inserted as last element in the body.
How can I make it stick to the trigger link/row?
