最简方案是用 :hover + title 属性，但样式不可控、移动端失效；定制化需用 position: absolute 配合 display/opacity 过渡，并兼顾触屏与无障碍支持。
用 :hover + title 属性是最简方案，但控制力极弱
直接给元素加 title 属性确实能触发浏览器原生提示框，但样式完全不可控、延迟固定、无法添加图标或富文本，且在移动端基本失效。真正需要定制化提示时，必须自己实现。
用 display: none + :hover 控制显隐是最常用做法
核心是把提示内容作为子元素或相邻兄弟元素，初始隐藏，悬停父元素时显示。关键点在于：
- 提示元素需用
position: absolute定位，否则会破坏文档流布局 - 父容器要设
position: relative，让绝对定位的提示框以它为参考系 - 避免用
visibility: hidden，它仍占空间，可能影响布局或遮挡其他交互 - 提示框本身建议加
pointer-events: none，防止鼠标移入提示框时触发退出悬停（导致闪动）
示例：
.tooltip-trigger {
position: relative;
}
.tooltip-content {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 4px 8px;
font-size: 12px;
pointer-events: none;
}
.tooltip-trigger:hover .tooltip-content {
display: block;
}
用 opacity + transition 实现淡入效果更友好
纯 display 切换会有突兀感，加过渡动画提升体验。但要注意：
-
display不能参与transition，必须改用opacity和visibility配合 - 推荐组合：
opacity: 0+visibility: hidden→opacity: 1+visibility: visible - 过渡时间建议 ≤ 0.2s，太慢显得迟钝，太快又看不清
- 若提示框含文字，可加
font-smooth: auto或-webkit-font-smoothing: antialiased防止模糊
移动端适配和焦点支持不能只靠 :hover
纯 :hover 在触摸设备上行为不一致：iOS Safari 可能延迟触发，Android Chrome 常不触发。真实项目中必须补充：
- 对触屏设备，用
@media (hover: none)或@media (pointer: coarse)检测，改用:focus-within或 JS 监听click - 键盘用户依赖
Tab导航，提示框需有tabindex="0"并支持Enter/Space触发 - 无障碍需加
aria-describedby关联提示 ID，并确保提示内容被屏幕阅读器读出
复杂点不在写法，而在判断什么时候该用纯 CSS、什么时候必须引入 JS 来接管交互逻辑——尤其当提示内容动态生成或需延迟显示时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
