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

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

我使用 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);
        }
    });
});

但这没有任何改变。

解决方法

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

tippyjs 文档在这里用一个非常简洁的例子进行了介绍：https://atomiks.github.io/tippyjs/v6/ajax/

,

正如 Stavros Angelis 指出的那样，tippy 实例定位在内容应用时已经计算好了。要在 ajax 调用解析时重新定位工具提示，您可以将 tippy 实例传递给 Azure Cloud Shell 函数，然后访问其中的 popper 实例以刷新工具提示：

refreshcart()

至于 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); } }); }); ：看起来像tippy@6（您的示例使用的）has dropped this prop，因此可以在此处删除。

更多关于 popper 实例的信息：https://github.com/atomiks/tippyjs/issues/191