【问题标题】：I am setting "placement:top" for the tippy tooltip but the tooltip is placed at the top-start position (maybe due to the padding )我正在为 tippy 工具提示设置 \"placement:top\" 但工具提示被放置在顶部开始位置（可能是由于填充）
【发布时间】：2023-02-05 05:50:31
【问题描述】：

调用函数


$($copy_button[0]).on("click", (event) => {
            show_tooltip($copy_button);
        });

调用函数


export function show_tooltip($copy_button) {
    // Display a tooltip to notify the user the version was copied.
    const instance = tippy($copy_button[0], {
        placement: 'top',
        onUntrigger() {
            remove_instance();
        },
    });
    instance.setContent("Copied!");
    instance.show();
    function remove_instance() {
        if (!instance.state.isDestroyed) {
            instance.destroy();
        }
    }
    setTimeout(remove_instance, 3000);
}

在图像 1 复制！确认位置很奇怪，我想让它与图像 2 相同。单击时显示“已复制”。

此处复制代码将在悬停时显示，位置非常完美。

这是图像的框结构。

我只想要“已复制！”工具提示与“复制代码”工具提示相同。但出于某种原因，“已复制！”工具提示位置很奇怪。提前致谢。

【问题讨论】：

如果您更改“已复制！”会发生什么？文本到更长的内容（例如，Lorem ipsum sit dolor amet）？展示位置是否与Copied! 的展示位置相同？另外，Copy code 工具提示和Copied! 工具提示的直接父级又如何呢？它是同一个 DOM 元素吗？
嘿，似乎直接父级是问题所在，我只需要将 ``` appendTo: () => document.body ``` 添加到代码部分即可获得结果。非常感谢你的帮助。

标签： javascript jquery tooltip tippyjs

【解决方案1】：

export function show_tooltip($copy_button) {
    // Display a tooltip to notify the user the version was copied.
    const instance = tippy($copy_button[0], {
        placement: 'top',
        appendTo: () => document.body,           //Just added this line.
        onUntrigger() {
            remove_instance();
        },
    });
    instance.setContent("Copied!");
    instance.show();
    function remove_instance() {
        if (!instance.state.isDestroyed) {
            instance.destroy();
        }
    }
    setTimeout(remove_instance, 3000);
}

将元素附加到 document.body 似乎有助于解决这个问题。

【讨论】：