title属性是最轻量悬停提示方案，仅支持纯文本、不可定制样式且移动端不触发；需优先用可见文本+aria-describedby保障可访问性；自定义tooltip必须js+css实现并监听focus/blur。
title属性是最直接的悬停提示方案
HTML 元素加 title 属性，浏览器原生支持鼠标悬停显示提示框，无需 JS 或 CSS。这是最轻量、兼容性最好的方式，所有现代浏览器和 IE6+ 都支持。
常见错误是把它当成“tooltip 组件”来用——title 提示不可定制样式、无法控制延迟/位置、移动端不触发（iOS Safari 仅在长按且有辅助功能开启时才可能显示）。它只适合简短、非关键、纯文本的补充说明。
-
title值里换行用\n），但多数浏览器会折叠成空格 - 避免放敏感信息或操作指引，因为用户可能根本看不到（比如屏幕阅读器默认不朗读
title） - 对
<input>、<button></button>、<a></a>等交互元素效果最稳定；对<div> 或无交互语义的标签，部分浏览器可能延迟显示或不显示 <h3>aria-label 和 aria-describedby 不触发悬停，但更可访问</h3> <p>如果你真正关心的是无障碍支持，<code>title反而是次要选择。aria-label和aria-describedby是给辅助技术（如读屏软件）用的，它们不会产生鼠标悬停气泡，但能确保视障用户获取等效信息。典型误用：把
aria-label当作title的增强版来写，结果悬停没提示、读屏也不读——因为aria-label会覆盖元素的可访问名称，若内容为空或与视觉不符，反而破坏体验。- 优先用真实可见文本 +
aria-describedby="id"关联一个隐藏的<div id="id" hidden>说明文字</div> -
aria-label适合图标按钮等无可见文本的场景，例如<button aria-label="删除该项"></button> - 不要同时设
title和aria-label，两者冲突时以aria-label为准
自定义 tooltip 必须用 JS + CSS，title 属性帮不上忙
想控制样式、动画、定位或响应式行为？
title完全无能为力。必须自己实现：监听mouseenter/focus，动态创建提示元素，计算位置并插入 DOM。容易踩的坑是直接用
title的值作为自定义 tooltip 内容——这看似省事，但会导致重复逻辑、无法做 HTML 转义（XSS 风险）、丢失换行和富文本意图。- 推荐从
data-tooltip或data-title这类自定义属性读取内容，和title解耦 - 务必监听
focus和blur，否则键盘用户无法触发提示 - 用
getBoundingClientRect()计算位置，别硬写 top/left，否则滚动时错位
移动端没有可靠的 hover，别依赖鼠标悬停逻辑
iOS 和 Android 浏览器基本不触发
hover伪类或mouseenter事件（除非模拟桌面模式）。所谓“悬停提示”在手机上要么不出现，要么变成点击后短暂弹出，体验割裂。这意味着：如果提示信息是操作必需的（比如“点击此处上传”），就不能只靠悬停呈现；必须让关键提示始终可见，或改用点击展开、长按唤出等明确手势。
- 测试时真机 > 模拟器，特别是 iOS Safari
- CSS 中慎用
:hover控制核心功能显示/隐藏，它在触摸设备上不可靠 - 用
@media (hover: hover) and (pointer: fine)可以条件性启用 hover 样式，但不能解决 JS 事件缺失问题
真正难的不是做出一个悬浮框，而是判断这个信息是否值得让用户“悬停发现”。多数情况下，把它写进界面文案、加个问号图标旁注，或者用
aria-describedby关联，比强求悬停更稳妥。 - 优先用真实可见文本 +
