title属性可直接为按钮添加悬停提示，是html原生全局属性，兼容性好但移动端基本无效；需与aria-label配合使用以兼顾鼠标用户和无障碍需求。
title属性能直接让按钮悬停显示提示文字
不用写JavaScript，title 是 HTML 原生支持的全局属性，所有元素（包括 <button></button>）都能用。鼠标悬停几毫秒后自动弹出系统级 tooltip，纯 CSS 实现，兼容性极好（IE6 都支持）。
常见错误是把 title 写成 tooltip 或 hint —— 这些都不是标准属性，浏览器直接忽略。
-
title值里换行符（\n）会被忽略，想换行得用 - 移动端不触发 hover，所以
title在 iOS/Android 上基本无效（Safari 仅部分场景支持长按） - 如果按钮内容本身是图标（比如
<button><i class="icon-delete"></i></button>），title就更关键，否则无障碍阅读器和键盘用户完全不知道功能
button上title和aria-label同时存在时怎么选
两者目的不同：title 面向鼠标悬停用户，aria-label 面向屏幕阅读器和键盘导航用户。不能互相替代。
实际项目中建议「同时设置」：既照顾 sighted 用户的临时提示，也满足 WCAG 2.1 的可访问性要求。
- 如果按钮文本已明确（如
<button>删除</button>），title可省略，但aria-label仍推荐显式声明，避免某些旧读屏器解析异常 - 如果按钮只有图标（无可见文本），必须同时设
title和aria-label，例如：<button title="删除此行" aria-label="删除此行"><i></i></button> -
aria-label优先级高于title，当两者冲突（比如值不同），读屏器只读aria-label
title提示文字太短或太长导致体验差怎么办
title 不是文案自由区——太短说不清，太长会被截断（Chrome 约 150 字符后省略，Firefox 更早），且无法控制样式、位置、延迟时间。
真正需要定制提示时，别硬撑 title，该上轻量 JS 方案：
- 用
data-tooltip自定义属性存完整文案，配合 CSS +:hover::after实现可控 tooltip（注意 focus 状态也要支持） - 若需支持键盘焦点、ESC 关闭、箭头键导航，就得用真实 DOM 节点 +
aria-describedby关联 - 第三方库如 tippy.js 或 popover API（
<div popover>）更适合复杂交互，但要权衡包体积和兼容性（Popover API 目前仅 Chrome 110+ 支持） <h3>React/Vue 里动态绑定title容易漏掉的细节</h3> <p>框架模板中写 <code>title={tooltipText}看似没问题，但有两处常被忽略：- 值为
null或undefined时，React 会渲染成title="undefined"，Vue 则可能留空属性或报 warning —— 建议统一用title={tooltipText || ""}清空 - 国际化文案若含变量（如
`确认删除 ${name}？`），确保name已转义，否则 XSS 风险（title不自动 HTML 转义） - SSR 场景下，服务端渲染的
title值若与客户端不一致，可能触发 hydration mismatch —— 检查服务端是否同步计算了 tooltip 内容
title是最快最轻的提示方案，但它的能力边界很清晰：只适合简短、静态、非关键的操作说明。一旦涉及多行、图标语义、国际化或交互反馈，就得跳出title思维，用更可控的方式实现。 - 值为
