浮动提示信息（tooltip）是网页里极常用的交互元素，比如在按钮上悬停显示操作说明，在链接上悬停展示完整标题。很多人以为做提示就必须引入JS库，其实只用CSS就能实现稳定可用的浮动提示。下面从结构、样式到边界处理，完整讲清楚实现方式。
一、基础结构与伪元素方案
纯CSS提示最典型的做法是利用data-属性保存提示文字，再用::after伪元素把它显示出来。这样做HTML干净，不需要额外嵌套提示节点。我们给目标元素加一个data-tip属性，样式里通过content: attr(data-tip)读取内容。
为什么用伪元素而不是额外标签？因为伪元素不占用DOM节点，不会干扰原有结构，也方便统一控制所有提示的样式。下面的例子展示一个最简单的按钮提示：
<button class="tip" data-tip="点击保存当前内容">保存</button>
.tip {
position: relative;
display: inline-block;
}
.tip::after {
content: attr(data-tip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
.tip:hover::after {
opacity: 1;
}
上面代码中，position: relative让按钮成为定位上下文，::after用absolute浮在按钮上方。opacity配合transition做出淡入效果，pointer-events: none避免提示框挡住鼠标引发闪烁。
这种写法的优点是非常轻量，缺点是所有提示样式绑在伪元素上，如果提示内容很长或需要换行，就要额外处理white-space和最大宽度。但它足以覆盖大部分基础场景。
二、绘制小箭头与定位优化
光有矩形提示框显得生硬，通常我们会加一个小三角箭头指向目标元素。用伪元素本身的border技巧就能画出箭头，不需要额外图片。
思路是再使用一个::before伪元素，把它设成宽高为0的盒子，通过透明边框和单侧有色边框形成三角形。下面是在上方提示框底部加向下的箭头：
.tip::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #333;
opacity: 0;
transition: opacity 0.2s;
}
.tip:hover::before {
opacity: 1;
}
注意这里::before的bottom: 100%和::after一致，让箭头紧贴提示框下边缘。由于两个伪元素都依赖hover显示，我们可以用同一组规则控制，避免状态不同步。
如果提示要放在右侧，只需把bottom/top改成left/right并调整transform。比如右侧提示时，::after设left: 100%; top: 50%; transform: translateY(-50%)，箭头用border-left-color指向左边。灵活调整这四个方向，就能适应不同布局。
三、多行文本与溢出处理
当data-tip内容较长时，white-space: nowrap会导致提示框超出屏幕。此时应改为正常换行，并限制最大宽度：
.tip::after {
white-space: normal;
width: max-content;
max-width: 200px;
text-align: center;
line-height: 1.4;
}
设置max-width后，文本会在达到宽度时自动折行。width: max-content保证短文本不会拉满整个最大宽度，视觉更紧凑。不过这种提示依旧可能被父容器overflow: hidden裁剪，所以提示元素最好不要放在滚动容器里。
另一个常见问题是提示被相邻元素遮挡。因为伪元素默认层级低于后续兄弟节点，可给::after加z-index: 10并确保父级没有建立过低层级的层叠上下文。若页面用了CSS框架，也要检查是否有全局z-index冲突。
四、动画与可访问性补充
除了淡入，还可以用translate做轻微位移，让提示更有质感：
.tip::after {
transform: translateX(-50%) translateY(4px);
}
.tip:hover::after {
transform: translateX(-50%) translateY(0);
}
位移加透明度过渡组合，能避免提示突然出现带来的突兀感。但要注意过渡属性要同时写在默认和hover态，否则回退时会生硬。
纯CSS提示对键盘用户不友好，因为:hover无法被Tab触发。如果项目对可访问性要求高，可以补充:focus样式，让获得焦点的元素也显示提示：
.tip:hover::after,
.tip:focus::after {
opacity: 1;
}
.tip:hover::before,
.tip:focus::before {
opacity: 1;
}
这样用Tab键切到按钮时，提示也会展现，兼顾了视障或键盘操作用户。总体来看，CSS浮动提示适合轻量静态场景，若需异步加载内容或复杂交互，再考虑JS增强即可。