如何让CSS tooltip仅在悬停原元素时显示，移开原元素即消失？

这个场景我太熟悉了！默认的hover行为确实会让tooltip“粘”在鼠标上，哪怕已经离开触发元素，要实现严格只在原元素悬停时显示tooltip，有两种实用方案，看你需求选：

方法一：纯CSS方案（简单高效，适合无交互的tooltip） #

核心思路是让tooltip本身不接收任何鼠标事件，这样当鼠标从原元素移到tooltip上时，浏览器会判定鼠标已经离开触发元素，tooltip自然就消失了。

实现代码： #

<div class="tooltip-trigger">
  悬停我查看tooltip
  <div class="tooltip">我是tooltip，鼠标移到我这里就会消失哦</div>
</div>

.tooltip-trigger {
  /* 给tooltip做定位参考 */
  position: relative;
  display: inline-block;
  padding: 4px 8px;
  background-color: #f0f0f0;
  cursor: help;
}

.tooltip {
  position: absolute;
  bottom: 120%; /* 放在触发元素上方 */
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  /* 默认隐藏tooltip */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  /* 关键属性：禁止tooltip接收鼠标事件 */
  pointer-events: none;
}

/* 只有触发元素hover时才显示tooltip */
.tooltip-trigger:hover .tooltip {
  opacity: 1;
  visibility: visible;
}

注意点： #

这个方案里的tooltip无法添加交互（比如链接、按钮），因为pointer-events: none会让所有元素都无法响应鼠标操作，如果你的tooltip需要交互，就用下面的JS方案。

方法二：JavaScript方案（灵活可控，支持复杂交互） #

如果tooltip里有需要点击的元素，或者你需要更精细的控制逻辑，直接用JS监听触发元素的mouseleave事件，一旦鼠标离开就立刻隐藏tooltip。

实现代码： #

<div class="tooltip-trigger">
  悬停我查看tooltip
  <div class="tooltip">我是tooltip，离开触发元素就消失<br><a href="#">我是可点击的链接</a></div>
</div>

.tooltip-trigger {
  position: relative;
  display: inline-block;
  padding: 4px 8px;
  background-color: #f0f0f0;
  cursor: help;
}

.tooltip {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

/* 用active类控制tooltip显示 */
.tooltip.active {
  opacity: 1;
  visibility: visible;
}

const triggerEl = document.querySelector('.tooltip-trigger');
const tooltipEl = document.querySelector('.tooltip');

// 鼠标进入触发元素时显示tooltip
triggerEl.addEventListener('mouseenter', () => {
  tooltipEl.classList.add('active');
});

// 核心：鼠标离开触发元素时，不管在哪都隐藏tooltip
triggerEl.addEventListener('mouseleave', () => {
  tooltipEl.classList.remove('active');
});

扩展： #

如果想加个小延迟再隐藏（比如防止鼠标不小心滑出的误操作），可以给mouseleave事件加个定时器：

let hideTimer;

triggerEl.addEventListener('mouseenter', () => {
  clearTimeout(hideTimer); // 清除之前的定时器
  tooltipEl.classList.add('active');
});

triggerEl.addEventListener('mouseleave', () => {
  hideTimer = setTimeout(() => {
    tooltipEl.classList.remove('active');
  }, 200); // 200毫秒后隐藏
});

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