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

Question

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

示例：

在我稍微滚动或调整页面大小后，它会正确定位。

示例：

是什么导致了这种行为？

代码笔示例（购物车为空但在 clicking/scrolling 时仍然具有相同的行为）：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

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

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

Answer 2

正如 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，因此可以在此处将其删除。

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

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

TippyJS tooltip is positioned weird but shows correctly after scrolling the page or resizing the window

html

javascript

css

jquery

tippyjs