title属性是浏览器原生只读提示机制，仅对交互元素生效，移动端基本失效，无样式控制、无事件响应、不支持富文本，无法满足可访问性与产品级tooltip需求。

title 属性不是气泡组件，它只是浏览器原生的、只读的文本提示机制。它能立刻解决“需要显示一句话说明”的刚需，但不能当 tooltip 用——尤其在正式产品中。

为什么title在移动端基本失效

iOS Safari 默认禁用 title 的触发展示；Android 各厂商浏览器行为不一致，部分仅响应长按且无视觉反馈。即使触发，也无过渡动画、无定位控制、无法聚焦，键盘用户和屏幕阅读器几乎无法可靠获取内容。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 不响应 touchstart 或 click，纯靠系统级悬停逻辑（而移动端没有悬停）
• 无法通过 JS 主动显示/隐藏，也不能绑定事件监听其出现或消失
• 文案换行会被截断，HTML 实体（如  ）会被转义为字面字符

title只能加在可交互元素上

它只对 <a></a>、<button></button>、<input>、<img> 等有语义交互能力的元素生效。<div>、<code><span></span> 上加 title 在多数浏览器中完全静默——不是 bug，是规范行为。

• 若你写了 <div title="提示">文字</div> 却没反应，不是 CSS 覆盖了，是浏览器根本不管
• 想让非交互元素带提示，必须加 tabindex="0" 或改用 <button type="button"></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 库早期版本都踩过坑。