title属性仅作补充性悬浮提示，非关键信息；移动端不触发，屏幕阅读器支持弱；必填规则等应放label或aria-describedby中。

title 属性确实能显示提示，但别指望它在所有场景下都可靠

直接给 <input> 加 title 属性，鼠标悬停时会弹出浏览器原生 tooltip，这是最轻量的提示方式。但它不是“输入框内说明”，而是悬浮提示；且移动端基本不触发，屏幕阅读器支持也弱。如果你要的是 placeholder 那种占位文字，请立刻转向 placeholder 属性——title 和 placeholder 完全不同，混用反而导致语义混乱。

正确设置 title 属性：只用于补充性、非关键的辅助说明

title 的定位是“额外解释”，比如字段含义模糊时加一句澄清。实际使用要注意：

• title 值不能含换行或双引号（否则 HTML 解析失败），建议纯文本、长度控制在 60 字以内
• 不要把必填规则、格式要求（如“请输入邮箱”）塞进 title，这些必须放在 label 或 aria-describedby 中
• React/Vue 等框架中，JSX 或模板里写 title="xxx" 即可，无需特殊处理；但若通过 JS 动态设置，要用 element.title = "xxx"，而非 setAttribute("title", "...")（后者在部分旧版 IE 中有兼容问题）
• 如果表单启用了 autocomplete，title 不会影响自动填充行为，也不应依赖它来引导用户填写

title 提示不出现？先排查这三个常见原因

悬停没反应，大概率不是代码写错，而是环境或交互限制：

• 移动端 Safari/Chrome 默认不响应 title 悬停事件（没有 hover 状态），iOS 用户根本看不到
• 用户开启了“减少动画”或“辅助功能高对比度模式”，部分浏览器会禁用原生 tooltip
• 父容器设置了 pointer-events: none 或 overflow: hidden 且裁剪了 tooltip 显示区域（tooltip 是相对视口定位的，可能被遮挡）
• 输入框处于 disabled 或 readonly 状态时，Chrome 会忽略 title（Firefox 仍显示）

比 title 更靠谱的替代方案：按场景选

真要确保提示可见、可访问、跨端一致，得换思路：

• 字段上方或下方加 <small class="hint">邮箱用于登录和找回密码</small>，配合 CSS 控制样式和间距
• 用 aria-describedby 关联一个隐藏的 <div id="email-hint" class="sr-only">...，兼顾屏幕阅读器和视觉用户
• 需要交互式提示（比如点击展开详情）？放弃 title，用 JS 控制 details/summary 或自定义 tooltip 组件
• 表单校验提示必须实时、明确，一律走 JS 校验 + 错误消息 DOM 插入，别依赖 title 传达错误信息

title 属性简单，但它的不可控性远超预期。真正影响用户体验的，从来不是“能不能加”，而是“加了之后谁看得见、什么时候看得见、看懂没”。