点击元素触发tooltip功能实现及tooltip位置异常问题求助

问题原因 #

• HTML规定id属性全局唯一，你在页面中多次重复使用id="envoie"、id="ship"，浏览器读取id元素时默认只会返回第一个匹配的元素，这是tooltip始终出现在第一个段落下方的核心原因
• 类名语法错误：class属性不需要加#前缀，#是CSS选择器的标识，直接写类名即可
• 缺少tooltip默认隐藏的样式配置，当前tooltip默认是显示状态
• CSS的transition属性写法错误，多写了多余的.符号
• 没有绑定对应的点击、鼠标移出事件逻辑，也没有做点击后匹配当前段落对应tooltip的处理

修正后可直接运行的代码 #

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  border: 1px solid black;
  margin: 5px;
}
/* 给tooltip的父容器加相对定位，让tooltip相对于父容器定位 */
.tooltip-wrap {
  position: relative;
  margin: 10px 0;
}
.envoie-fr, .ship-fr {
  margin-top: -25px;
  opacity: 0;
  z-index: 2000;
  visibility: hidden;
  transition: all 0.1s linear;
  position: absolute;
  left: 0;
  top: 100%;
  background: #fff;
  border: 1px solid #ccc;
  padding: 2px 5px;
}
/* tooltip显示的类 */
.tooltip-show {
  opacity: 1;
  visibility: visible;
}
</style>

<script>
  window.addEventListener("load", () => {
    // 获取所有可点击触发tooltip的段落
    const envoieTriggers = document.querySelectorAll(".envoie-trigger");
    const shipTriggers = document.querySelectorAll(".ship-trigger");

    // 绑定First Paragraph的点击事件
    envoieTriggers.forEach(trigger => {
      // 点击显示对应tooltip
      trigger.addEventListener("click", () => {
        // 找到当前段落同级的envoie tooltip
        const curTooltip = trigger.nextElementSibling;
        curTooltip.classList.add("tooltip-show");
      })
      // 鼠标移出隐藏tooltip
      trigger.addEventListener("mouseleave", () => {
        const curTooltip = trigger.nextElementSibling;
        curTooltip.classList.remove("tooltip-show");
      })
    })

    // 绑定Second Paragraph的点击事件，逻辑同上
    shipTriggers.forEach(trigger => {
      trigger.addEventListener("click", () => {
        const curTooltip = trigger.nextElementSibling;
        curTooltip.classList.add("tooltip-show");
      })
      trigger.addEventListener("mouseleave", () => {
        const curTooltip = trigger.nextElementSibling;
        curTooltip.classList.remove("tooltip-show");
      })
    })
  });
</script>
</head>
<body>
<div>
  <div class="tooltip-wrap">
    <p class="envoie-trigger">First Paragraph</p>
    <div class="envoie-fr">Envoie</div>
  </div>
  <div class="tooltip-wrap">
    <p class="ship-trigger">Second Paragraph</p>
    <div class="ship-fr">Ship</div>
  </div>
</div>
<hr />
<div>
  <div class="tooltip-wrap">
    <p class="envoie-trigger">First Paragraph</p>
    <div class="envoie-fr">Envoie</div>
  </div>
  <div class="tooltip-wrap">
    <p class="ship-trigger">Second Paragraph</p>
    <div class="ship-fr">Ship</div>
  </div>
</div>
<div>
  <p class="example" style="margin-top:50px">Bottom</p> 
</div>
</body>
</html>

改动说明 #

• 移除了所有重复的id属性，改用class标识元素，符合HTML规范
• 新增了父容器相对定位配置，让tooltip相对于当前触发元素的父容器定位，保证每个tooltip都显示在对应触发段落的附近
• 修正了类名写法、transition写法错误，新增了tooltip默认隐藏、显示的样式类
• 事件绑定逻辑改为遍历所有触发元素，点击时获取当前元素同级的对应tooltip进行显示/隐藏操作，不会出现匹配错误的问题

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