直接为 <input type="file"> 添加 title 属性即可实现悬浮提示，浏览器原生支持；若用 <label> 包裹，则应将 title 放在 label 上更稳妥，但需注意移动端 Safari 对 label 的 title 支持较弱。
file input 怎么加 title 属性实现悬浮提示
直接给 <input type="file"> 加 title 属性是最简单有效的做法，浏览器原生支持，鼠标悬停自动显示文字，无需 JS 或 CSS。
常见错误是以为 title 不生效——其实它在大多数现代浏览器（Chrome、Edge、Firefox、Safari）里都正常工作，但仅对「可交互区域」触发；而部分旧版 IE 或自定义样式后隐藏了原生控件，会导致失效。
-
title值必须是纯文本，不解析 HTML 标签 - 中文内容无需额外编码，直接写即可：
title="点击选择图片文件" - 如果用了
display: none隐藏原生 input，title就完全没机会触发——这是最常踩的坑
用 label 包裹 file input 并设 title 的注意事项
很多人用 <label> 包裹 <input type="file"> 来扩大点击区域，这时 title 放在 <label> 上更稳妥，因为用户实际悬停的是 label 文本或伪元素。
但要注意：label 的 title 和 input 的 title 不会叠加，只显示离鼠标最近的那个。优先把 title 放在 label 上，避免因样式遮挡导致 input 不可悬停。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
<label title="支持 JPG、PNG，最大 5MB">上传头像<input type="file" accept="image/*" /></label> - 如果 label 内有图标或 span，且设置了
pointer-events: none，可能阻断悬停事件，需检查 - 移动端 Safari 对 label 的
title支持较弱，hover 效果基本无效，别依赖它做关键提示
想自定义悬浮框样式？别用 title，改用 aria-describedby + tooltip
当需要控制字体、背景色、箭头、延迟时间，或者要兼容屏幕阅读器时，title 就不够用了——它无法样式化，也不保证被读屏软件读出。
正确做法是用 aria-describedby 关联一个隐藏的说明元素，并配合 CSS 实现 tooltip。这个方案可控性强，也符合无障碍规范。
- 给 input 加：
aria-describedby="file-hint" - 加一个
<div id="file-hint" class="tooltip" aria-hidden="true">建议使用正方形 PNG</div> - 用
:hover或 JS 控制.tooltip的显隐，注意添加position: absolute和z-index - 务必同步设置
aria-hidden="true"和tabindex="-1"，避免键盘焦点误入
accept 属性和 title 提示的关系容易混淆
accept 是功能限制（真正过滤可选文件类型），title 只是提示，两者语义不同，不能互相替代。用户仍可能通过“所有文件”选项绕过 accept，所以关键校验必须放在 JS 或服务端。
- 写
accept="image/png,image/jpeg"后，再配title="仅支持 PNG 和 JPG"，体验更清晰 - 不要只靠
title告诉用户“不能传 ZIP”，因为用户看不到限制是否真实生效 - 某些安卓 WebView 对
accept支持不稳定，title提示就成了唯一可见引导
title 能解决 80% 的轻量提示需求，但只要涉及定制样式、多语言、无障碍或复杂交互，就得切到 aria-describedby 方案——这点很容易被忽略，等测试提 bug 才补，不如一开始就按场景选对路子。 
