如何使用相同ID或class实现多行复制的Tooltip切换功能？

问题场景 #

制作一个含约50行内容的页面，需求是点击每行复制内容，鼠标hover时显示「copy」提示，点击后显示「copied」提示。当前复制功能和hover提示正常，但点击后的「copied」提示仅第一行生效——原因是所有Tooltip使用了相同ID，且无法为每行设置不同ID。

解决方法 #

放弃使用ID定位Tooltip，利用DOM的层级关系，直接获取当前操作元素对应的专属提示框：

修改后的完整代码 #

HTML（移除重复ID）

<html>
   <body style="text-align: center;">
      <br>
      <br>
      <div class="tooltip">
         <p class="copy">Copy this 1st line.</p>
         <span class="tooltiptext">Copy</span>
      </div>
      <br>
      <div class="tooltip">
         <p class="copy">Copy this 2nd line.</p>
         <span class="tooltiptext">Copy</span>
      </div>
      <br>
      <div class="tooltip">
         <p class="copy">Copy this 3rd line.</p>
         <span class="tooltiptext">Copy</span>
      </div>
      <br>
      <div class="tooltip">
         <p class="copy">Copy this 4th line.</p>
         <span class="tooltiptext">Copy</span>
      </div>
   </body>
</html>

CSS（无需修改）

.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
background: red;
color: #fff;
text-align: center;
padding: 3px 3px;
border-radius: 15px;
position: absolute;
z-index: 1;
bottom: 90%;
left: 75%;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.copy {
cursor: pointer;
}

JS（修改Tooltip定位逻辑，新增自动恢复提示）

var copy = document.querySelectorAll(".copy");

for (const copied of copy) {
    copied.onclick = function () {
        document.execCommand("copy");
        // 通过父容器找到当前行的Tooltip
        var tooltip = this.parentNode.querySelector('.tooltiptext');
        tooltip.innerHTML = "Copied!";
        // 2秒后自动恢复成"Copy"提示
        setTimeout(() => {
            tooltip.innerHTML = "Copy";
        }, 2000);
    };

    copied.onmouseover = function () {
        var tooltip = this.parentNode.querySelector('.tooltiptext');
        tooltip.innerHTML = "Copy";
    };

    copied.addEventListener("copy", function (event) {
        event.preventDefault();
        if (event.clipboardData) {
            event.clipboardData.setData("text/plain", copied.textContent);
            console.log(event.clipboardData.getData("text"));
        }
    });
}

关键修改说明 #

1. HTML：删掉所有重复的id="myTooltip"，只保留类名.tooltiptext，避免ID冲突问题
2. JS：将document.getElementById("myTooltip")替换为this.parentNode.querySelector('.tooltiptext')——通过当前点击的.copy元素的父容器.tooltip，找到对应的提示框，确保每个操作都只影响当前行的Tooltip
3. 体验优化：新增setTimeout，点击后2秒自动把提示改回「Copy」，不用等用户再次hover才恢复

内容的提问来源于stack exchange，提问作者rTx