如何用css实现悬停提示气泡-css教程-PHP中文网

如何用css实现悬停提示气泡

P粉602998670

发布： 2025-10-03 21:45:02

原创

667人浏览过

答案：通过纯CSS的:hover伪类控制visibility和opacity实现提示气泡显示隐藏，利用position定位和::after伪元素创建箭头，结合transition添加过渡效果，支持多方向扩展且无需JavaScript。

如何用css实现悬停提示气泡

实现悬停提示气泡（Tooltip）可以通过纯 CSS 完成，不需要 JavaScript。核心思路是利用 :hover 伪类控制隐藏/显示提示内容，并通过定位让气泡出现在元素附近。

基本结构与样式

HTML 使用一个容器元素包裹触发元素和提示文本：

<div class="tooltip">
悬停我
<span class="tooltiptext">这是提示内容</span>
</div>

基础 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;
}

只需修改定位和箭头方向即可适配不同位置。