title属性是html全局属性，用于在鼠标悬停或键盘聚焦时显示原生提示框，仅在可交互元素（如、、）上稳定生效；移动端基本无效，不支持样式定制，且不可替代aria-label实现可靠可访问性。
title 属性的基本用法和生效条件
HTML 元素的 title 属性能直接触发浏览器原生的悬停提示，但只在**鼠标悬停且元素可聚焦或有交互上下文**时显示（例如 <button></button>、@#@#@#@#@#@#@#@#@#@0
<img><button title="点击复制到剪贴板">复制</button><input type="text" title="请输入邮箱地址，将用于验证">注意：<div> 或 <code><span></span> 默认无交互行为，若想确保提示出现，建议加上 tabindex="0" 或 CSS cursor: pointer，否则部分浏览器（如 Safari）可能忽略。
常见失效原因和绕过方式
提示不出现，大概率不是写错了，而是被以下情况抑制：
- 元素被
pointer-events: none覆盖（父级或自身设置了该样式） - 内容为空或仅含空白字符（
title=""或title=" "不触发） - 元素被
overflow: hidden且title文本过长，导致浏览器截断后判定为无效 - 在移动端 Safari 中，
title几乎不响应触摸悬停（这是设计使然，非 bug）
若必须支持移动端或需要样式定制，应改用 aria-label + 自定义 tooltip 组件（如 Tippy.js），而非强依赖 title。
title 与 aria-label 的关键区别
title 和 aria-label 都能提供辅助信息，但作用机制完全不同：
-
title：仅对鼠标悬停有效，屏幕阅读器**可能读取也可能忽略**（取决于浏览器+读屏器组合，ChromeVox 读，NVDA 默认不读） -
aria-label：专为辅助技术设计，**强制被屏幕阅读器朗读**，但对鼠标悬停无任何视觉效果 - 二者可共存：
<button title="关闭面板" aria-label="关闭当前侧边栏面板">×</button>，兼顾鼠标用户与无障碍需求
别指望 title 解决可访问性问题；也别在需要精确控制提示时机或外观时还硬套它——它的定位就是轻量、临时、浏览器原生的“小纸条”。
