答案：纯CSS可实现悬浮提示文本功能，通过:hover伪类和::after伪元素生成提示框。首先设置元素相对定位，利用data-tooltip属性存储提示内容，伪元素通过content:attr()获取文本，初始隐藏（visibility:hidden，opacity:0），悬停时显示（visibility:visible，opacity:1），并添加过渡动画。可扩展三角箭头、多方向定位、换行控制等优化。关键在于定位与显隐控制逻辑。
在CSS初级项目实战中，实现悬浮提示文本（也叫Tooltip）是一个常见且实用的功能。它能在用户将鼠标悬停在某个元素上时，显示额外的说明文字，提升用户体验。这个效果不需要JavaScript，纯CSS就能完成。
基本原理
利用CSS的 :hover 伪类和伪元素（如 ::after 或 ::before），可以为任意元素添加悬浮时才出现的提示文本。关键在于默认隐藏提示框，鼠标悬停时再显示出来。
HTML结构
给需要提示的元素添加一个带有提示内容的属性，比如 data-tooltip：
悬停我查看提示
CSS样式实现
通过以下步骤完成样式设置：
- 设置相对定位，使提示框能相对于目标元素定位
- 使用 ::after 伪元素生成提示文本
- 默认隐藏提示框，:hover 时显示
- 美化外观：圆角、背景色、阴影等
完整CSS代码示例：
立即学习“前端免费学习笔记（深入）”；
.tooltip {
position: relative;
display: inline-block;
padding: 8px 12px;
background-color: #f0f0f0;
border: 1px solid #ccc;
cursor: pointer;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 8px;
padding: 6px 10px;
background-color: #333;
color: #fff;
font-size: 14px;
white-space: nowrap;
border-radius: 4px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}
.tooltip:hover::after {
opacity: 1;
visibility: visible;
}
优化细节
为了让提示更友好，可以加入一些改进：
- 添加小箭头：用伪元素 ::before 制作三角形指向下方
- 控制最大宽度 + 文字换行，避免过长文本撑开页面
- 调整出现位置（上方、下方、左侧、右侧）适应不同场景
- 增加淡入动画，视觉更自然
基本上就这些。掌握这个技巧后，你可以把它应用到按钮、图标、链接等各种需要解释说明的地方，让界面更清晰易用。不复杂但容易忽略的是定位和隐藏/显示的控制逻辑，理解清楚 position 和 visibility 配合使用是关键。
