1

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

但这并没有改变什么。

4

2 回答 2

1

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

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

于 2021-03-01T10:05:39.797 回答
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 （您的示例使用的）已删除此 prop，因此可以在此处将其删除。

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

于 2021-03-02T23:07:56.017 回答