答案：通过纯CSS的:hover伪类控制visibility和opacity实现提示气泡显示隐藏，利用position定位和::after伪元素创建箭头，结合transition添加过渡效果，支持多方向扩展且无需JavaScript。
实现悬停提示气泡（Tooltip）可以通过纯 CSS 完成，不需要 JavaScript。核心思路是利用 :hover 伪类控制隐藏/显示提示内容，并通过定位让气泡出现在元素附近。
基本结构与样式
HTML 使用一个容器元素包裹触发元素和提示文本：
悬停我
这是提示内容
基础 CSS 设置提示默认隐藏，悬停时显示：
.tooltip {position: relative;
display: inline-block;
cursor: pointer;
}
.tooltiptext {
visibility: hidden;
width: 120px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 4px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s, visibility 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
添加小三角（箭头）
使用伪元素 ::after 创建指向下方的小三角：
立即学习“前端免费学习笔记（深入）”；
.tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}
箭头通过设置不同方向的边框颜色模拟三角形，这里朝下，所以上边框为实色，其余透明。
调整位置（上/下/左/右）
可扩展多个方向的提示。例如顶部提示：
.tooltip-top .tooltiptext {bottom: auto;
top: 125%;
margin-top: 5px;
}
.tooltip-top .tooltiptext::after {
top: auto;
bottom: 100%;
border-color: transparent transparent #333 transparent;
border-width: 5px;
}
只需修改定位和箭头方向即可适配不同位置。
优化体验
- 使用 transition 实现淡入淡出效果，避免突兀出现
- 设置 z-index 防止被其他元素遮挡
- 限制最大宽度并设置自动换行，防止长文本溢出
- 移动端注意 hover 可能不生效，需结合点击或媒体查询处理
