title属性仅支持鼠标悬停触发、无样式控制、不支持交互，不能替代tooltip库；需直接加在button、input等可交互元素上，div需加tabindex才可能生效；移动端不支持，且与aria-label/aria-describedby用途不同，无法满足无障碍需求。
title 属性能实现最基础的工具提示，但只在鼠标悬停时触发、无样式控制、不支持交互，别指望它替代 tooltip 库。
title 属性怎么写才生效
直接加在任意支持的 HTML 元素上就行，比如 <button></button>、<input>、<span></span>、<img alt="HTML怎么添加工具提示_HTML title属性实现教程【提示】" >。浏览器原生识别，不用 JS 或 CSS 配合。
常见错误现象：title 写在 <div> 上却没反应？——其实是有的，但只有当该 <code><div> 有焦点（如加了 <code>tabindex="0"）或被鼠标悬停且内容可交互时，部分浏览器才显示；更稳妥的做法是套一层 <span></span> 或改用语义化元素。
- 正确写法：
<button title="保存当前编辑">?</button> - 空格和换行会被压缩，
title="第一行 第二行"在多数浏览器里不会换行显示 - 不支持 HTML 标签，
title="<strong>加粗</strong>"会原样显示文本，不会渲染
title 提示不出现的几个真实原因
不是代码写错了，而是环境或行为不符合触发条件。
立即学习“前端免费学习笔记（深入）”；
- 移动端 Safari / Chrome 不触发
title（iOS 没 hover 概念，且苹果明确禁用该行为） - 元素被
pointer-events: none或父级遮挡，鼠标根本“碰不到” - 内容为空或全是空白字符：
title=""或title=" "（全角空格）都不会显示 - Chrome 在启用“高对比度模式”或某些屏幕阅读器设置下，可能默认隐藏
title
和 aria-label、aria-describedby 有什么区别
三者目的不同，不能混用或互相替代。
-
title：仅面向鼠标悬停用户，纯视觉提示，辅助技术（如读屏器）通常忽略它 -
aria-label：替代元素的可访问名称，读屏器必读，但完全不触发任何视觉提示 -
aria-describedby：指向另一段描述性文本（如<div id="hint">…</div>），读屏器会读出，也可配合 CSS 做可见提示
如果既要无障碍又要提示效果，得同时写：<input aria-label="搜索关键词" title="按回车开始搜索"> —— 但注意，这会让读屏器重复读两遍，需权衡。
想自定义样式？title 就不是你的选择
所有浏览器对 title 的样式（颜色、字体、箭头、圆角、延迟时间、位置）都完全不可控。CSS 无法选中它，JS 无法监听“显示/隐藏”事件。
真正需要定制时，必须放弃 title，改用：
- 纯 CSS 方案：用
::before/::after+:hover模拟（仅限简单场景，不支持聚焦、键盘导航） - 轻量 JS 方案：监听
mouseenter和focus，动态插入带 class 的<div> 元素 <li>已有库：Tippy.js、floating-ui、或者框架自带的 <code>Tooltip组件（如 Ant Design 的<tooltip></tooltip>）
容易被忽略的一点：很多团队在做无障碍验收时，才发现 title 对键盘用户、屏幕阅读器用户几乎无效，而他们又没补 aria- 属性——这时候再返工，比一开始选对方案成本高得多。
