title属性仅适用于简短提示，无法自定义样式、不支持html、移动端失效且可访问性差；正确用法限于可交互元素（如、），纯需加tabindex="0"；关键信息应控制在前30字符内。

title属性能做什么，不能做什么

title属性确实能快速实现鼠标悬停时的提示文字，但它不是现代前端推荐的提示方案——它无法自定义样式、不支持HTML内容、移动端基本不可用，且可访问性差。如果你只是想给一个链接或按钮加个简短说明（比如“删除这条记录”），title够用；但要是需要图标、换行、链接或适配屏幕阅读器，就得换方案。

怎么写才不会被忽略或失效

浏览器对title的触发有隐含条件：元素必须是可聚焦或交互型的（如@#@#@#@#@#@#@#@#@#@0

❌ 无效：<div title="提示文字">普通文本</div>（建议加tabindex="0"或换用<span></span>）

⚠️ 注意：中文引号、全角空格、控制字符会导致title截断或乱码

替代方案比title更靠谱的三个场景

当title撑不住时，优先考虑轻量级替代：

Wechat HTML Publisher

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

下载

• 需要带样式的提示 → 用aria-label配合CSS伪元素+::before/::after，或引入tooltip类库（如Tippy.js）
• 要支持键盘导航或屏幕阅读器 → 用aria-describedby关联<div role="tooltip">，并控制<code>visibility和focus逻辑
• 只是临时调试查看字段含义 → 直接用data-title自定义属性，再用JS绑定mouseenter事件生成浮动层，避免污染语义

Chrome/Firefox/Safari对title的处理差异

Chrome最新版会在title过长时自动省略（…），Firefox保留全文但只显示单行，Safari则对title长度敏感——超过约60字符可能直接不显示。所有浏览器都忽略title中的<strong></strong>等标签，也都不支持设置延迟时间或消失动画。

• 测试技巧：在DevTools里右键检查元素，看title属性是否被正确解析，而不是仅靠肉眼悬停
• 兼容底线：把最关键的信息放在前30字符内，后面补一句“详情见帮助文档”之类引导性文字
• 别依赖它做关键操作提示——比如“确认删除”这种动作，必须用显式弹窗，不能只靠title
实际项目里，title最稳妥的用法就两种：给<img>补alt缺失的上下文，或者给<input type="text">加格式说明。其余情况，多花两分钟写个data-tooltip + 简单JS，反而更可控。