能，title属性可直接合法用于按钮，浏览器自动渲染为悬停提示；但移动端无效，且与aria-label共存时后者优先被读屏器识别。
title 属性能直接用在按钮上吗
能，而且完全合法。<button> 是 HTML 中少数几个原生支持 title 属性的交互元素之一，浏览器会自动将其渲染为悬浮提示（tooltip），无需 JS 或 CSS 干预。
常见错误是误以为只有 <img> 或 <a> 才能用 title —— 实际上只要元素可聚焦（比如 <button>、<input>、<textarea>），且不是 disabled 状态，title 就会生效。
-
disabled的<button title="保存">不会显示提示（多数浏览器跳过） - 空格或纯空白字符串（
title=""或title=" "）会被忽略，不触发提示 - 提示内容中换行符（
\n）会被折叠成空格，无法实现多行显示
中文提示文字要不要加引号或标点
不需要额外包装。HTML 解析器会原样提取 title 的文本内容，引号、顿号、句号都可直接写，但要注意语义清晰和长度控制。
实际使用中，过长的 title 文字在不同浏览器里表现不一：Chrome 通常截断并加省略号，Firefox 可能撑开提示框，Safari 则倾向换行（但非强制）。建议单句控制在 30 字以内。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐：
<button title="删除当前选中的项目">?️</button> - ❌ 避免：
<button title="警告：此操作不可撤销，确认后将永久移除数据，并且无法通过回收站恢复。">删除</button> - ⚠️ 注意：屏幕阅读器会朗读
title，所以别写“点击此处”这类冗余信息
title 和 aria-label 冲突吗
不冲突，但行为优先级不同。当两者同时存在时，aria-label 会覆盖 title 对辅助技术的影响（如屏幕阅读器只读 aria-label），而鼠标悬停仍显示 title 提示。
这意味着你可以用 title 服务鼠标用户，用 aria-label 服务键盘/无障碍用户，二者互补而非互斥。
- 仅需基础提示 → 单独用
title - 按钮图标无文字（如
<button>✏️</button>）→ 必须加aria-label，title可选加 - 想统一提示内容 → 直接省略
title，只用aria-label（此时鼠标悬停无原生提示）
移动端 Safari 和 Chrome 不显示 title 怎么办
这是事实：iOS Safari 和部分 Android Chrome 版本**默认不触发 title 悬浮提示**，因为没有“悬停”概念。这不是 bug，而是设计取舍——移动设备靠点击/长按交互，原生 title 被视为桌面端特性。
如果你必须在移动端提供提示，不能依赖 title。可行路径只有两个：
- 用
aria-describedby+ 隐藏<div>，配合 JS 控制显隐（需处理触摸事件） - 改用轻量 tooltip 库（如 tippy.js），它检测设备类型并自动降级为点击触发
- 最简方案：在按钮旁加小问号图标（
<span role="button" aria-label="说明：导出为 CSV 格式">❓</span>），避免对title产生依赖
别试图用 :hover CSS 模拟原生 title，它无法解决焦点管理、屏幕阅读器兼容、触摸反馈等核心问题。
