点击带.copy类的span复制文本后Tooltip无法显示问题求助

首先，你代码里用的tooltip()是jQuery UI的组件方法，如果没正确引入jQuery和jQuery UI的依赖库，Tooltip肯定无法正常工作，这是最常见的前提问题。

其次，你在copy事件里重复调用span.tooltip({ content: ... })初始化Tooltip，会导致组件重复绑定引发冲突，这也是Tooltip不显示的核心原因。

修复步骤： #

1. 确保引入依赖
   在HTML的<head>里添加jQuery和jQuery UI的资源（本地文件或CDN均可）：

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

2. 优化代码逻辑
   提前一次性初始化所有span的Tooltip，在复制事件里仅更新内容并触发显示，避免重复初始化：

const spans = document.querySelectorAll(".copy");
for (const span of spans) {
    // 提前初始化Tooltip，可设置默认参数
    $(span).tooltip({
        content: "复制成功",
        position: { my: "left+15 center", at: "right center" } // 可选：调整Tooltip位置
    });

    span.onclick = function() {
        // 用现代API替代已废弃的execCommand
        navigator.clipboard.writeText(span.textContent).then(() => {
            // 更新Tooltip内容并打开
            $(span).tooltip("option", "content", `已复制：${span.textContent}`);
            $(span).tooltip("open");
            // 自动关闭Tooltip（可选）
            setTimeout(() => {
                $(span).tooltip("close");
            }, 2000);
        }).catch(err => {
            console.error("复制失败:", err);
            $(span).tooltip("option", "content", "复制失败");
            $(span).tooltip("open");
        });
    };

    // 如果你坚持用execCommand和copy事件，修改后的代码如下：
    // span.onclick = function() {
    //     document.execCommand("copy");
    // };
    // span.addEventListener("copy", function(event) {
    //     event.preventDefault();
    //     if (event.clipboardData) {
    //         event.clipboardData.setData("text/plain", span.textContent);
    //         // 直接更新已初始化的Tooltip内容并打开
    //         $(span).tooltip("option", "content", `已复制：${span.textContent}`);
    //         $(span).tooltip("open");
    //         setTimeout(() => {
    //             $(span).tooltip("close");
    //         }, 2000);
    //     }
    // });
}

关键修改说明： #

• 提前初始化Tooltip，避免事件触发时重复创建组件导致冲突
• 用tooltip("option", "content", ...)更新内容，而非重新初始化
• 可选添加自动关闭逻辑，优化用户体验
• 推荐使用navigator.clipboard.writeText()替代已废弃的document.execCommand("copy")

内容的提问来源于stack exchange，提问作者ar.gorgin