使用CSS可实现无需JavaScript的悬浮提示框。通过相对定位容器、绝对定位提示文本，并利用:hover触发opacity和visibility的显示切换，配合transition实现淡入动画，再用伪元素添加箭头指向，即可完成简洁高效的Tooltip效果。
悬浮提示框（Tooltip）是一种常见的交互效果，通常在用户将鼠标悬停在某个元素上时显示额外信息。使用 CSS 可以轻松实现这种效果，无需 JavaScript。下面介绍一种简洁实用的实现方法。
基本 HTML 结构
给需要提示的元素添加一个容器，内部包含触发元素和提示内容。例如：
悬停我 这是一个提示文本
核心 CSS 样式
通过定位和隐藏/显示控制实现悬浮效果。
1. 容器设置相对定位
立即学习“前端免费学习笔记（深入）”；
让提示内容相对于这个容器定位。
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
2. 隐藏提示文本，默认不显示
使用 opacity 和 visibility 控制视觉状态，transition 添加淡入动画。
.tooltiptext {
visibility: hidden;
width: 120px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px;
position: absolute;
z-index: 1;
bottom: 125%; /* 显示在元素上方 */
left: 50%;
margin-left: -60px; /* 宽度一半，居中 */
opacity: 0;
transition: opacity 0.3s, visibility 0.3s;
font-size: 14px;
}
3. 鼠标悬停时显示提示
利用 :hover 触发显示效果。
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
可选增强效果
让提示框更美观或适应不同位置。
添加小三角（箭头）
使用伪元素创建指向下方的小箭头：
.tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}
调整显示方向
修改 bottom、top、left 或 right 值可改变提示位置。例如显示在下方：
.tooltiptext {
top: 125%;
bottom: auto;
}
.tooltiptext::after {
top: -10px;
border-color: transparent transparent #333 transparent;
border-width: 5px;
}
基本上就这些。纯 CSS 实现的提示框轻量、高效，适合大多数场景。关键是用好 position、visibility 和 :hover 的组合，再加点动画和样式提升体验。
