点击复制图标时Tooltip不显示，如何修复代码使其可见？

问题根源 #

1. Tooltip默认opacity: 0，但点击时未添加触发显示的动画类appear，导致始终不可见。
2. 动画appear中的transform属性覆盖了Tooltip初始的translateX(-50%)，造成位置偏移甚至超出可视区域。
3. HTML中每个列表项已自带Tooltip元素，JS代码却重复创建新元素，存在冗余。

修复方案 #

1. 复用已有Tooltip元素

移除JS中创建新Tooltip的代码，改为定位当前列表项中已有的Tooltip，添加动画类触发显示。

2. 修正动画中的transform属性

在keyframes中保留初始的translateX(-50%)，仅修改Y轴偏移，避免位置错乱。

3. 优化Tooltip初始位置

将top: -30%调整为top: -100%，让Tooltip显示在列表项上方，避免被遮挡。

修改后的完整代码 #

JavaScript

$(document).ready(function () {
  /* COPY TO CLIPBOARD */

  $(".copy-icon").on("click", function (e) {
    e.preventDefault();

    let listItem = $(this).closest("li");
    let abbreviation = listItem.find("p").text();

    // 复制逻辑
    let $temp = $("<input>");
    $("body").append($temp);
    $temp.val(abbreviation).select();
    document.execCommand("copy");
    $temp.remove();

    // 复用已有Tooltip并触发动画
    let tooltip = listItem.find(".tooltip");
    tooltip.addClass("appear");

    // 动画结束后移除类，支持再次触发
    setTimeout(function () {
      tooltip.removeClass("appear");
    }, 1000);
  });
});

CSS

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  overflow-y: scroll;
}

body {
  font-family: "Poppins", sans-serif;
  background-color: #f0f0f0;
}

/* Centering content */
.center {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Container for the abbreviations list */
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  justify-content: center;
  font-family: "Poppins", sans-serif;
  padding: 0 20px;
}

/* Abbreviations list row */
.abbreviations-row {
  list-style: none;
  padding: 0;
}

/* Abbreviation list item */
.abbreviations-list li {
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin: 10px;
  padding: 10px;
  position: relative;
}

/* Copy icon */
.copy-icon {
  color: #2a7475;
  font-size: 24px;
  margin-right: 10px;
  cursor: pointer;
}

.copy-icon:hover {
  transform: translateY(-4px);
  opacity: 1;
}

.tooltip {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: #373737;
  padding: 10px 15px;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
  letter-spacing: 1px;
  opacity: 0;
  z-index: 1;
}

.tooltip.appear {
  animation: appear 1s ease forwards;
}

@keyframes appear {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  20% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  80% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
}

HTML

（保持原结构无需修改）

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