title 属性在 <a> 标签中仅在桌面端悬停时显示，需满足非触摸设备、pointer-events 未禁用、浏览器未屏蔽 tooltip 等条件；移动端不触发，非 bug 而是规范行为。
title 属性在 <a> 标签里到底显示不显示？
它确实会显示，但只在鼠标悬停（hover）且满足特定条件时出现：必须是桌面端、非触摸设备、未被 CSS 禁用 pointer-events、且浏览器未禁用原生 tooltip（比如某些企业内网策略或辅助工具覆盖）。移动端几乎从不触发——这不是 bug，是规范行为。
常见误判是把 title 当作“链接预览”功能来用，结果在手机上完全没反应。如果你真需要跨设备可见的预览，title 不是可靠方案。
怎么写才让 title 有实际效果？
写法很简单，但细节决定成败：
-
title值必须是非空字符串，<a href="#" title="">空title</a>不会显示任何提示 - 避免换行和多余空格，
title=" 链接到首页 "两端空格会被浏览器截断或忽略 - 不要放敏感信息或关键操作说明，因为 tooltip 可能不出现、不可聚焦、不被屏幕阅读器稳定支持
- 如果链接文字本身已说明意图（如
<a href="/contact">联系我们</a>），加title="联系我们页面"属于冗余，反而增加维护负担
title 和 aria-label 冲突吗？
不冲突，但行为不同：title 是视觉悬停提示，aria-label 是无障碍语义描述。两者同时存在时，屏幕阅读器通常优先读 aria-label，而鼠标悬停仍显示 title。
立即学习“前端免费学习笔记（深入）”；
典型合理组合：
<a href="/report.pdf" title="2024年度安全报告（PDF，2.1MB）" aria-label="下载2024年度安全报告 PDF 文件">安全报告</a>
这里 title 补充了文件大小和格式这类视觉辅助信息，aria-label 则明确动作+内容+格式，各司其职。
替代 title 实现“真正可见”的链接预览
如果目标是让用户在点击前明确知道链接去向或内容，更健壮的做法是显式呈现：
- 在链接旁加
<small>或图标提示：<a href="/blog">技术博客</a> <small>(新窗口打开)</small> - 用 CSS +
::after伪元素补充图标或标识，例如外链加 ↗ 符号，PDF 加 ? - 对重要操作链接（如删除、导出），改用按钮 + 模态确认，而不是依赖悬停提示
原生 title 的最大限制在于不可控：你无法设置样式、延迟、位置，也不能绑定事件或做埋点。一旦需求超出“简单悬停提示”，就得主动放弃它。
