TippyJS工具提示的位置很奇怪，但在滚动页面或调整窗口大小后显示正确

Question

我使用TippyJS来显示工具提示，但由于某些原因，当第一次单击工具提示时，它的位置太靠右了，如果你有一个小屏幕，它甚至会超出视图。

示例：

​

​

而当我滚动一点，或者调整页面大小后，它就被正确定位了。

示例：

​

​

是什么导致了这种行为？

示例代码(购物车是空的，但在单击/滚动时仍具有相同的行为)：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);
        }
    });
});

但这并没有改变什么。

Answer 1

正如Stavros Angelis指出的那样，当应用内容时，已经计算出了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 (你的例子使用的) has dropped this prop，所以可以在这里删除它。

有关弹出器实例的更多信息，请单击此处：https://github.com/atomiks/tippyjs/issues/191

Answer 2

问题来自onShow函数。您的代码的工作方式是，首先打开弹出窗口，然后执行ajax调用并获取一些html以附加到tippy框中。此时，tippy长方体已经渲染并计算出宽度为0、高度为0的长方体的位置。然后ajax调用完成，容器更改尺寸，并在视区之外结束。

tippyjs文档在这里用一个非常干净的示例介绍了这一点：https://atomiks.github.io/tippyjs/v6/ajax/