答案：通过CSS伪元素和定位实现悬停提示效果。先设置父元素相对定位，伪元素绝对定位并隐藏，悬停时结合opacity与visibility显示带箭头的提示框，利用transition实现平滑过渡，箭头通过border属性生成，整体无需JavaScript即可完成交互。
制作一个简单的悬停提示（tooltip）效果，可以使用纯 CSS 实现，无需 JavaScript。通过利用伪元素 ::before 或 ::after，我们可以在元素悬停时显示附加信息，比如说明文字或提示内容。
基本结构与原理
tooltip 的核心思路是：
- 给目标元素设置相对定位 position: relative
- 使用 ::before 或 ::after 伪元素创建提示框
- 默认隐藏提示（如 opacity: 0）
- 鼠标悬停时显示（opacity: 1，配合 visibility 或 transform 控制）
HTML 结构示例
悬停我 这是提示信息
CSS 样式实现
下面是完整的 CSS 实现方式：
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* 可选：加下划线提示可交互 */
cursor: pointer;
}
.tooltiptext {
position: absolute;
bottom: 125%; / 提示框在元素上方 /
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 5px 10px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
/ 默认隐藏 /
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
/ 使用 ::before 添加小箭头 /
}
.tooltiptext::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #333; / 箭头颜色 /
}
/ 悬停时显示提示 /
.tooltip:hover .tooltiptext {
opacity: 1;
visibility: visible;
}
关键点说明
几点需要注意的细节：
立即学习“前端免费学习笔记（深入）”；
- position: relative 在父容器上必不可少，否则绝对定位的提示会脱离文档流错位
- 使用 visibility + opacity 组合比仅用 display 更适合动画过渡
- ::before 用于创建指向被提示元素的小三角，通过边框技巧实现
- 调整 bottom 和 top 值可控制提示位置（上、下、左、右）
基本上就这些。不复杂但容易忽略定位和过渡的细节。
