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">...</div>，兼顾屏幕阅读器和视觉用户 - 需要交互式提示（比如点击展开详情）？放弃
title，用 JS 控制details/summary或自定义 tooltip 组件 - 表单校验提示必须实时、明确，一律走 JS 校验 + 错误消息 DOM 插入，别依赖
title传达错误信息
title 属性简单，但它的不可控性远超预期。真正影响用户体验的，从来不是“能不能加”，而是“加了之后谁看得见、什么时候看得见、看懂没”。
