title属性对非文本元素仅在特定原生交互元素（如img、input）上可靠触发系统提示；div等容器依赖浏览器兼容性兜底，存在无障碍、跨端及一致性风险，应改用role+tabindex+aria-label组合实现。
title 属性对非文本元素是否真能触发系统级悬停提示
能，但有严格限制：只有 <img>、<input>、<textarea>、<iframe>、<area> 等原生可聚焦或具语义交互能力的元素，浏览器才会在悬停时渲染原生 tooltip；<div>、<span>、<svg> 等纯容器默认不触发——不是 bug，是规范行为。
为什么给 <div> 加 title 有时“看起来有效”
那其实是浏览器的兼容性兜底逻辑，不是标准支持。不同浏览器表现不一：Chrome 会渲染（但延迟高、无键盘支持），Safari 在某些 macOS 版本下完全忽略，Firefox 对非交互元素已逐步降权。实际项目中依赖它等于把提示逻辑交给不可控的 UA 实现。
- 测试方式：用键盘
Tab切入该<div>，看是否能通过Enter或Space触发提示——绝大多数情况下不能 - 无障碍影响：屏幕阅读器（如 NVDA、VoiceOver）通常跳过
title，除非元素同时有role="button"或tabindex="0" - 移动端完全失效：iOS/Android 浏览器不响应
title悬停，且无 hover 状态
真正可靠的做法：用 aria-label + CSS tooltip + 键盘逻辑补全
系统级提示的本质是「可访问、可聚焦、可交互」，不是靠一个属性偷懒。正确路径是组合使用：
<div role="button" tabindex="0" aria-label="删除这条记录（按 Enter 确认）" class="icon-delete" ></div>
-
role="button"告诉辅助技术这是可操作元素 -
tabindex="0"让它能被键盘聚焦，触发:focus样式和aria-label朗读 - 用
::after+content: attr(aria-label)实现视觉 tooltip，避免重复写title - 监听
keydown捕获Enter/Space，保持操作一致性
title 属性唯一不该省的场景：img 和 input 的基础 fallback
当 <img> 缺失或加载失败，title 是少数仍可能被读屏软件捕获的字段（虽不如 alt 权重高）；<input type="date"> 在旧版 IE 中也依赖 title 提示格式要求。但注意：
立即学习“前端免费学习笔记（深入）”；
-
<img src="..." alt="猫咪照片" title="点击放大">——alt是必需语义，title是额外操作提示，二者不可互换 -
title值里不要放关键操作指引（如“必填”），应放进aria-describedby关联的<span>中，确保键盘和屏幕阅读器都能稳定获取 - 所有现代框架（React/Vue）中，直接绑定
title={...}到自定义组件上，等同于给<div>加title，一样不可靠
真正的系统级提示不靠单个属性，而靠角色、状态、焦点、语义四者齐备。漏掉任意一环，用户就可能卡在看不见、点不到、读不出的断点上。
