Блог

Я использую TippyJS для отображения всплывающей подсказки, но по какой-то причине при первом нажатии на всплывающую подсказку она располагается слишком сильно вправо, и если у вас маленький экран, он даже выйдет за пределы поля зрения.

Пример:

В то время как после того, как я немного прокручиваю или изменяю размер страницы, она позиционируется правильно.

Пример:

Что может быть причиной такого поведения?

Пример codepen (корзина пуста, но все равно ведет себя так же при нажатии / прокрутке): https://codepen.io/twan2020/pen/ZEBvYXv

Я попытался настроить boundary:viewport такие параметры, как:

 $( ".carttip" ).each(function( i ) {
    tippy(this, {
        theme: 'blue',
        trigger: 'click',
        allowHTML: true,
        animation: 'scale-subtle',
        maxWidth: 400,
        boundary: 'viewport',
        interactive: true,
        content: function (reference) {
            return reference.querySelector('.tooltipcontent');
        },
        onShow(instance) {
            refreshcart(true);
        }
    });
});
 

Но это ничего не меняло.

Как указывает Ставрос Анджелис, расположение экземпляра tippy уже вычисляется при применении содержимого. Чтобы изменить положение всплывающей подсказки при разрешении вызова ajax, вы можете передать экземпляр tippy в refreshcart() функцию, а затем получить доступ к экземпляру popper внутри него, чтобы обновить всплывающую подсказку:

 function refreshcart(force, tippyInstance) {
    $.ajax({
        type: 'post',
        url: 'includes/refreshcart.php',
        data: ({}),
        success: function(data){
            $('body #headercart').empty().append(data);
            tippyInstance.popperInstance.update(); // Here, the tippy positioning is updated
        }
    });
}

// other code...

$( ".carttip" ).each(function( i ) {
    tippy(this, {
        theme: 'blue',
        trigger: 'click',
        allowHTML: true,
        animation: 'scale-subtle',
        maxWidth: 400,
        boundary: 'viewport', // This has been dropped in tippy@6
        interactive: true,
        content: function (reference) {
            return reference.querySelector('.tooltipcontent');
        },
        onShow(instance) {
            refreshcart(true, instance);
        }
    });
});
 

Что касается boundary : похоже, что tippy @6 (который используется в вашем примере) отбросил эту опору, поэтому ее можно удалить здесь.

Подробнее об экземпляре popper здесь: https://github.com/atomiks/tippyjs/issues/191

Проблема возникает из-за функции OnShow. Способ работы вашего кода заключается в том, что сначала вы открываете всплывающее окно, затем выполняете вызов ajax и извлекаете некоторый HTML-код для добавления в поле tippy. В этот момент поле tippy уже отрисовало и рассчитало положение поля с шириной 0 и высотой 0. Затем вызов ajax завершается, и контейнер изменяет размеры и оказывается за пределами области просмотра.

Документация tippyjs описывает это здесь на очень понятном примере: https://atomiks.github.io/tippyjs/v6/ajax /