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

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

例如：

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

例如：

是什么导致了这种行为

示例代码笔（购物车为空，但在单击/滚动时仍具有相同的行为）：

我尝试过在如下选项中设置

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框中。此时，tippy长方体已经渲染并计算了宽度为0、高度为0的长方体的位置。然后ajax调用完成，容器更改尺寸并结束于视口之外

---

tippyjs文档用一个非常清晰的例子说明了这一点：

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

---

tippyjs文档用一个非常清晰的例子说明了这一点：

正如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);
        }
    });
});

至于

边界

：看起来像tippy@6（您的示例使用），因此可以在此处删除它

---

更多关于popper实例的信息：

正如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);
        }
    });
});

至于

边界

：看起来像tippy@6（您的示例使用），因此可以在此处删除它

有关popper实例的更多信息，请参见此处：