答案：通过纯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 创建指向下方的小三角：
立即学习“前端免费学习笔记（深入）”；
稿定抠图
AI自动消除图片背景
76 查看详情 .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 可能不生效，需结合点击或媒体查询处理基本上就这些。纯 CSS 实现简洁高效，适合大多数场景。
以上就是如何用css实现悬停提示气泡的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1033081.html
微信扫一扫 
支付宝扫一扫 
