title属性是浏览器原生只读提示机制，仅对交互元素生效，移动端基本失效，无样式控制、无事件响应、不支持富文本，无法满足可访问性与产品级tooltip需求。
title 属性不是气泡组件，它只是浏览器原生的、只读的文本提示机制。它能立刻解决“需要显示一句话说明”的刚需，但不能当 tooltip 用——尤其在正式产品中。
为什么title在移动端基本失效
iOS Safari 默认禁用 title 的触发展示；Android 各厂商浏览器行为不一致，部分仅响应长按且无视觉反馈。即使触发，也无过渡动画、无定位控制、无法聚焦，键盘用户和屏幕阅读器几乎无法可靠获取内容。
- 不响应
touchstart或click，纯靠系统级悬停逻辑（而移动端没有悬停） - 无法通过 JS 主动显示/隐藏，也不能绑定事件监听其出现或消失
- 文案换行会被截断，HTML 实体（如
title只能加在可交互元素上
它只对 <a>、<button>、<input>、<img> 等有语义交互能力的元素生效。<div>、<span> 上加 title 在多数浏览器中完全静默——不是 bug，是规范行为。
- 若你写了
<div title="提示">文字</div>却没反应，不是 CSS 覆盖了，是浏览器根本不管 - 想让非交互元素带提示，必须加
tabindex="0"或改用<button type="button">包裹 - 加了
tabindex后需手动处理keydown（如 Enter/Space 触发），否则键盘用户仍不可达
title样式完全不可控
字体、颜色、背景、圆角、箭头、阴影、z-index、延迟时间……全部由操作系统和浏览器渲染引擎决定，前端无任何干预手段。Chrome 和 Firefox 的 title 样式甚至不一致。
立即学习“前端免费学习笔记（深入）”；
- 无法设置最大宽度，超长文案会折行错位或被裁切
- 无法添加图标、链接、按钮等任何富文本内容
- 无法与页面主题色同步，深色模式下常出现白底黑字刺眼组合
- 调试时写
title="debug: user.id=123"很快，上线前必须替换掉
真正要支撑可访问、可定位、可交互的提示，就得放弃 title 的幻想，老实用 position: absolute + aria-describedby + getBoundingClientRect() 这套组合。最易被忽略的是：气泡容器必须挂到 document.body 下并用 position: fixed，否则滚动时它就飘走了——这点连很多 UI 库早期版本都踩过坑。
