Bootstrap 4 popper перемещает верхний левый угол при прокрутке или изменении размера окна - PullRequest
Новая
       21

Bootstrap 4 popper перемещает верхний левый угол при прокрутке или изменении размера окна

0 голосов
/ 25 июня 2019

На нашей новой странице администратора с таблицами данных и bootstrap4 мы реализовали попер для каждой строки. Он отлично работает в большинстве случаев. Когда мы прокручиваем или окно изменено, поппер перемещается в верхний левый угол и остается там.

Я перепробовал все возможные конфигурации, такие как удаление всех возможных конфигураций и внутренних компонентов для кнопки. 

<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 для datatables для инициализации popper. 

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>

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>

Наблюдение В реализации начальной загрузки 3 поппер вставляется как элемент рядом с запускающим якорем / строкой, где, как и в Bootstrap 4, поппер вставляется как последний элемент в теле.

Как сделать так, чтобы он привязывался к триггерной ссылке / строке?

...