title属性仅适用于简短提示，无法自定义样式、不支持HTML、移动端失效且可访问性差；正确用法限于可交互元素（如、<button>），纯<div>需加tabindex="0"；关键信息应控制在前30字符内。
title属性能做什么，不能做什么
title属性确实能快速实现鼠标悬停时的提示文字，但它不是现代前端推荐的提示方案——它无法自定义样式、不支持HTML内容、移动端基本不可用，且可访问性差。如果你只是想给一个链接或按钮加个简短说明（比如“删除这条记录”），title够用；但要是需要图标、换行、链接或适配屏幕阅读器，就得换方案。
怎么写才不会被忽略或失效
浏览器对title的触发有隐含条件：元素必须是可聚焦或交互型的（如<a>、<button>、<input>），纯<div>或<span>加title在部分浏览器里可能不显示。另外，空格和换行会被压缩成单空格，想换行得用
（但多数浏览器仍忽略）。
- ✅ 正确：
<a href="#" title="保存草稿 （Ctrl+S）">保存</a> - ❌ 无效：
<div title="提示文字">普通文本</div>（建议加tabindex="0"或换用<span>） - ⚠️ 注意：中文引号、全角空格、控制字符会导致
title截断或乱码
替代方案比title更靠谱的三个场景
当title撑不住时，优先考虑轻量级替代：
- 需要带样式的提示 → 用
aria-label配合CSS伪元素+::before/::after，或引入tooltip类库（如Tippy.js） - 要支持键盘导航或屏幕阅读器 → 用
aria-describedby关联<div role="tooltip">，并控制visibility和focus逻辑 - 只是临时调试查看字段含义 → 直接用
data-title自定义属性，再用JS绑定mouseenter事件生成浮动层，避免污染语义
Chrome/Firefox/Safari对title的处理差异
Chrome最新版会在title过长时自动省略（…），Firefox保留全文但只显示单行，Safari则对title长度敏感——超过约60字符可能直接不显示。所有浏览器都忽略title中的<strong>等标签，也都不支持设置延迟时间或消失动画。
立即学习“前端免费学习笔记（深入）”；
- 测试技巧：在DevTools里右键检查元素，看
title属性是否被正确解析，而不是仅靠肉眼悬停 - 兼容底线：把最关键的信息放在前30字符内，后面补一句“详情见帮助文档”之类引导性文字
- 别依赖它做关键操作提示——比如“确认删除”这种动作，必须用显式弹窗，不能只靠
title
title最稳妥的用法就两种：给<img>补alt缺失的上下文，或者给<input type="text">加格式说明。其余情况，多花两分钟写个data-tooltip + 简单JS，反而更可控。 
