在网页交互设计中，给图片添加悬停提示气泡是很常见的需求，通过CSS的absolute定位和:hover伪类就能实现纯CSS的提示气泡效果，不需要额外编写JavaScript代码，实现成本低且交互流畅。
实现原理说明
整个效果的核心依赖两个CSS特性：
- absolute定位：提示气泡元素设置position: absolute后，会脱离正常文档流，相对于最近的已定位祖先元素（position不为static的元素）进行定位，这样就能把气泡固定在图片的指定位置，不会影响其他元素的布局。
- :hover伪类：当鼠标悬停在目标元素上时，:hover选择器匹配的元素样式会生效，我们可以利用这个特性控制提示气泡的显示和隐藏。
基础实现步骤
1. HTML结构搭建
首先需要准备图片容器、图片本身和提示气泡三个部分，气泡作为容器的子元素，方便基于容器进行定位：
<div class="img-container"> <img src="https://picsum.photos/200/150?random=2" alt="示例图片" class="target-img"> <div class="tooltip">这是一张风景示例图片，拍摄于自然风景区</div> </div>
2. 基础样式设置
给容器设置相对定位，作为气泡的定位参照，同时给图片和气泡设置基础样式：
/* 容器设置相对定位，作为absolute元素的参照 */
.img-container {
position: relative;
display: inline-block;
/* 避免气泡超出容器被裁剪，可选 */
overflow: visible;
}
/* 图片基础样式 */
.target-img {
width: 200px;
height: 150px;
border-radius: 4px;
}
/* 提示气泡基础样式，默认隐藏 */
.tooltip {
position: absolute;
/* 定位在图片底部居中位置 */
bottom: 100%;
left: 50%;
transform: translateX(-50%);
/* 气泡外观样式 */
background-color: #333;
color: #fff;
padding: 8px 12px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
/* 默认隐藏 */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
/* 小三角箭头 */
margin-bottom: 8px;
}
/* 气泡底部小三角 */
.tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}
3. 添加hover触发逻辑
通过:hover伪类控制鼠标悬停时气泡的显示状态，这里选择给容器添加:hover，只要鼠标在容器内（包括图片和气泡区域）就会触发显示，避免气泡闪烁：
/* 鼠标悬停在容器上时，显示气泡 */
.img-container:hover .tooltip {
opacity: 1;
visibility: visible;
}
常见问题与优化
气泡定位偏移问题
如果气泡内容长度不固定，使用left:50%;transform:translateX(-50%)的组合可以始终让气泡水平居中在图片上方，不受内容宽度影响。如果需要定位在其他位置，比如右侧，可以调整bottom和left的值：
/* 气泡定位在图片右侧 */
.tooltip-right {
left: 100%;
top: 50%;
bottom: auto;
transform: translateY(-50%);
margin-left: 8px;
margin-bottom: 0;
}
/* 右侧气泡的三角调整 */
.tooltip-right::after {
top: 50%;
left: auto;
right: 100%;
transform: translateY(-50%);
border-color: transparent #333 transparent transparent;
}
避免气泡被其他元素遮挡
如果页面中有其他定位元素，可能会出现气泡被遮挡的情况，可以给气泡添加z-index属性，设置较大的值即可：
.tooltip {
z-index: 999;
}
兼容无hover的设备
在移动端等没有鼠标悬停操作的设备上，这个效果无法触发，如果需要兼容移动端，可以额外添加点击触发的交互，或者结合JavaScript实现点击切换显示隐藏的逻辑。
完整示例代码
下面是可直接运行的完整示例，复制后保存为HTML文件即可查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS图片提示气泡示例</title>
<style>
.img-container {
position: relative;
display: inline-block;
margin: 50px;
}
.target-img {
width: 200px;
height: 150px;
border-radius: 4px;
border: 1px solid #eee;
}
.tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 8px 12px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
margin-bottom: 8px;
z-index: 999;
}
.tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}
.img-container:hover .tooltip {
opacity: 1;
visibility: visible;
}
</style>
</head>
<body>
<div class="img-container">
<img src="https://picsum.photos/200/150?random=3" alt="示例图片" class="target-img">
<div class="tooltip">这是一张风景示例图片，拍摄于自然风景区</div>
</div>
</body>
</html>