如何实现鼠标悬停停留后在光标下方显示提示文本？

一、原生HTML title 属性（最快实现） #

直接给元素加title属性就行，浏览器自带这个功能，不用写额外CSS：

<div class="box" title="这是一个演示盒子">悬停我看提示</div>
<img src="demo.jpg" alt="演示图片" title="这是一张演示图片">

• 优点：零成本实现，自动在光标下方显示提示
• 缺点：样式完全由浏览器控制，没法自定义，也没法设置延迟显示

二、自定义CSS Tooltip（支持延迟+样式定制） #

如果需要控制显示延迟、自定义提示框样式，纯CSS就能搞定，核心是用伪元素和过渡动画：

完整代码 #

<style>
/* 给需要提示的元素设置相对定位，让提示框基于它定位 */
.tooltip {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  background: #f0f0f0;
  cursor: help;
}

/* 提示框默认隐藏：透明+绝对定位 */
.tooltip::after {
  content: attr(data-tooltip); /* 读取元素的data-tooltip属性当提示文本 */
  position: absolute;
  bottom: 120%; /* 定位到元素上方，改top:120%就能放下方 */
  left: 50%;
  transform: translateX(-50%);
  background: #2d2d2d;
  color: #fff;
  padding: 6px 10px;
  border-radius: 3px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none; /* 避免提示框干扰鼠标操作 */
  transition: opacity 0.2s ease;
  transition-delay: 1s; /* 悬停1秒后才显示，可调整时长 */
}

/* 鼠标悬停时显示提示框 */
.tooltip:hover::after {
  opacity: 1;
}
</style>

<div class="tooltip" data-tooltip="悬停1秒后显示这个自定义提示">悬停我等1秒</div>
<img class="tooltip" src="demo-img.png" alt="示例图片" data-tooltip="这是图片的延迟提示">

关键细节 #

• 用data-tooltip属性存提示文本，灵活方便
• transition-delay: 1s就是你要的「停留一段时间才显示」的效果，改成0.5s就是半秒后显示
• 可以随意修改提示框的背景色、字体大小、位置，完全自定义样式
• pointer-events: none保证鼠标移到提示框上时，不会触发原元素的悬停状态失效

演示效果描述：鼠标放在元素上，等待1秒后，元素上方会弹出一个深色的小提示框，显示预设的文本；鼠标移开后，提示框会立刻消失。

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