原生title属性仅零代码可用但移动端不触发、样式不可控、内容纯文本；可靠提示需分层选方案：css+data-tip轻量自定义、js控制动态交互、aria-describedby语义化辅助。
原生 title 属性能快速加提示，但移动端不触发、样式不可控、内容不能含 HTML——它只是“有”，不是“好用”。真要可靠提示，得按场景分层选方案。
用 title 属性时必须知道的限制
这是唯一零 JS/CSS 的方式，但实际使用中容易误判能力边界：
-
title在 iOS Safari 和多数安卓 WebView 中完全不响应悬停，触屏设备用户根本看不到 - 换行符
\n、HTML 标签（如<strong></strong>）、图标或链接都会被浏览器忽略，只渲染纯文本 - 无法设置出现延迟、动画、定位偏移；鼠标一挪就消失，没有 hover 保持时间
- 虽对屏幕阅读器友好（会读出），但如果同时写了
aria-label，后者优先级更高，title反而被跳过
CSS + data-tip 实现轻量自定义提示
适合需要改颜色、加箭头、控制显示时机，又不想引入 JS 库的场景。核心靠伪元素和 :hover：
- 触发元素必须设
position: relative，否则::after无法精确定位 - 提示内容只能存为纯文本，通过
data-tip="提示文字"注入，不能含 HTML 或事件绑定 - 隐藏/显示必须用
visibility: hidden/visible+opacity配合transition，只用opacity会导致鼠标穿透（底层元素仍可点击） - 避免在
display: inline元素（如<span></span>）上直接加transform动画，可能引发渲染错位
JavaScript 控制的提示层要注意事件陷阱
当提示需动态内容、跟随鼠标、支持键盘焦点（Tab 进入时显示）或带关闭按钮时，JS 是必要选择：
- 监听
mouseenter/focus创建提示 DOM，mouseleave/blur移除；别用mouseover，它会冒泡触发多次 - 用
setTimeout做 300ms 延迟显示，但必须在mouseleave中调用clearTimeout，否则快速划过多个元素会残留定时器 - 提示层推荐
position: fixed，避免父级transform或overflow: hidden把它裁掉 - 务必加
role="tooltip"和aria-hidden="true"（显示时改为false），否则屏幕阅读器无法感知
语义化提示优先用 aria-describedby 而非浮层
如果提示本质是辅助说明（比如表单输入框的格式要求），浮层反而是干扰。更健壮的做法是：
- 把提示文本放在页面某处（可视觉隐藏），例如：
<div id="email-hint" class="sr-only">请输入有效的邮箱地址</div> - 目标元素上绑定：
<input aria-describedby="email-hint"> - 配合
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); }确保仅读屏器可见 - 这种方式不依赖悬停、不打断操作流、无障碍支持最直接，且无 z-index 或堆叠管理问题
真正难的不是让提示“弹出来”，而是让它在正确的时间、以正确的形态、被正确的人看到——尤其是当用户没看屏幕，而是在听的时候。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
