移动端不显示title属性提示，因触屏无hover状态；纯CSS tooltip需用data-tooltip+伪元素实现，注意定位与层叠上下文问题，且移动端应改用点击触发或直接展示关键信息。
直接用 title 属性最简单，但移动端不显示；真要浮动文字（tooltip），得自己写 CSS 或 JS，否则没法控制样式、位置和内容。
button:hover + title 为什么在手机上没反应
因为触屏设备没有“悬停”这个交互状态——手指点下去是 :active，松开就结束，:hover 不会被触发，title 自然也不弹。这不是 bug，是浏览器故意设计的。强行在移动端模拟 hover 容易误触、延迟反馈，还可能被 Safari 拦截。
常见错误现象：
- PC 上正常，手机点一下没提示，以为代码错了
- 加了
@media (hover: hover)判断后仍失效，其实是父容器用了transform或filter，导致层叠上下文隔离，title提示框被裁掉
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 核心信息别只靠
title传达，比如操作含义、必填说明，应直接写在界面里 - 若只是辅助提示（如“编辑”、“删除”），可改用
:active配合短时背景色变化，或加一个轻量 tooltip 组件 - 不要给按钮设
pointer-events: none，否则title和点击都会失效
纯 CSS 实现可定制 tooltip（无 JS）
用 ::before/::after 伪元素 + data-tooltip 是目前最轻量、兼容性最好的方案，适合纯文本提示。
关键点：
- 必须给触发元素设
position: relative，否则伪元素定位会相对于 body 偏移 -
content: attr(data-tooltip)只读取属性值，不支持 HTML 标签，所以不能放链接或图片 - 移动端仍需手动触发（比如点击），否则还是看不到；可用
@media (hover: none)加 fallback
示例结构：
<button class="tooltip" data-tooltip="保存当前设置">?</button>
CSS 片段：
.tooltip {
position: relative;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 4px 8px;
border-radius: 3px;
font-size: 12px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s;
z-index: 1000;
}
.tooltip:hover::after {
opacity: 1;
visibility: visible;
}
button:hover 触发 tooltip 的定位错位问题
伪元素 tooltip 显示偏左/偏上/被截断，90% 是因为父容器有 overflow: hidden、clip-path，或触发元素本身带 transform 导致新层叠上下文生成，把 tooltip “关”在里面了。
排查顺序：
- 打开开发者工具，选中 tooltip 元素，看 computed 中
z-index是否生效（auto表示无效） - 往上逐级检查父元素是否设置了
overflow: hidden、transform、filter、will-change - 把 tooltip 改为挂载到
<body>下（需 JS），绕过所有父级限制
临时解法（不推荐长期用）：
- 给 tooltip 父容器加
overflow: visible（但可能破坏布局） - 把 tooltip 的
position改成fixed，再用 JS 动态算坐标（增加复杂度）
移动端 tooltip 必须考虑的三个事实
不是“怎么让它在手机上显示”，而是“它本来就不该依赖 hover”。真实项目里容易忽略的点：
- iOS Safari 对
title的触发非常保守，长按几秒才可能出，且无法自定义样式 - 用
touchstart+touchend模拟 hover，但用户手指一滑就消失，体验比 PC 还差 - 真正靠谱的做法：对触屏设备，默认显示简短标签（如图标旁加文字“返回”），或点击后展开详情面板
如果非要用浮动提示，建议直接引入 Popper.js 或 Tippy.js，它们自动处理边界检测、滚动跟随、焦点管理——手写逻辑在小屏幕下几乎必然翻车。
