实现提示气泡需结合HTML与CSS，通过定位和伪元素创建箭头；2. 使用.tooltip容器和.tooltip-text提示框结构，配合:default隐藏、:hover显示；3. 利用::after伪元素及透明边框形成三角箭头，调整方位可支持多方向；4. 添加过渡动画提升体验，控制层级避免遮挡。
实现提示信息气泡的关键是结合HTML结构与CSS样式，通过定位、边框和伪元素来创建带有箭头的气泡效果。下面是一个简单实用的实现方式。
基本HTML结构
使用一个容器元素表示触发提示的控件，另一个元素作为气泡提示框：
<div class="tooltip">悬停我
<span class="tooltip-text">这是一个提示信息</span>
</div>
基础CSS样式
为提示框设置背景、圆角和隐藏默认状态，使用 :hover 控制显示：
.tooltip {position: relative;
display: inline-block;
}
.tooltip-text {
visibility: hidden;
position: absolute;
top: -60px;
left: 50%;
transform: translateX(-50%);
width: 180px;
background-color: #333;
color: #fff;
text-align: center;
padding: 8px;
border-radius: 6px;
font-size: 14px;
z-index: 1;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
添加气泡箭头
利用伪元素 ::after 创建三角形箭头，指向触发元素：
立即学习“前端免费学习笔记（深入）”；
.tooltip-text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #333;
}
这个箭头通过设置上下左右边框，只保留上边框有颜色，形成向上的小三角。调整 top 和 border 方向可改变箭头位置（如顶部、左侧、右侧）。
扩展方向支持
若需要不同方向的气泡，可通过类名区分：
- 向下箭头：将 top: 100% 改为 bottom: 100%，箭头用 border-bottom
- 左/右箭头：调整 left/right 定位，并使用对应的水平边框组合
例如右侧气泡箭头：
.tooltip-text.right::after {top: 50%;
left: 0%;
transform: translateY(-50%);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #333;
border-right: none;
}
基本上就这些。通过合理使用定位、透明边框和过渡动画，就能做出简洁美观的提示气泡。关键是控制好位置关系和视觉层级，避免遮挡内容。
