title属性的核心作用是为html元素提供辅助性文本信息，浏览器在鼠标悬停或键盘聚焦时以原生提示框展示，纯语义支持且零开销，天然兼容屏幕阅读器。
title 是 HTML 元素的全局属性，它的核心作用只有一条：为元素提供**辅助性文本信息**，浏览器在用户鼠标悬停（或键盘聚焦）时自动以原生提示框形式展示。它不参与布局、不触发重排、不绑定事件，纯属语义与可访问性支持。
什么时候该用 title 属性？
适合场景非常明确：
- 需要极简实现、无样式定制需求的提示（比如表格列头说明、图标含义补充）
- 内容是静态短文本（建议 ≤ 120 字符），且无需换行、富文本或图标
- 目标用户包含屏幕阅读器使用者——
title会被读出，对无障碍友好 - 不想引入额外 CSS 类名或 JS 逻辑，追求零依赖交付
反例：想加阴影/圆角/箭头/渐变动画？别碰 title，它做不到。
title 的常见失效现象和原因
你写好了 title="操作说明"，但悬停没反应？大概率是以下之一：
- 元素设置了
pointer-events: none—— 浏览器根本收不到悬停事件 - 父容器用了
overflow: hidden且提示框被裁切（title提示框不受此影响，但自定义 tooltip 会） - 元素本身不可聚焦且无交互行为（如
<span></span>在某些旧版 Safari 中需加tabindex="0"才能触发title） - 用了伪元素遮挡（例如
::before覆盖了整个区域，实际悬停的是伪元素而非原标签）
注意：title 在移动端基本无效（iOS Safari 完全不支持悬停），不要把它当主要交互手段。
和自定义 tooltip 的关键参数差异
对比不是为了否定谁，而是选对工具：
-
title：无 class 控制、无 transition、无 z-index、无法监听显示/隐藏事件、不支持 HTML 内容 - 自定义 tooltip（CSS +
:hover或 JS）：可设z-index: 9999、加opacity过渡、用attr(data-tip)动态注入内容、支持aria-label增强可访问性 - 性能上：
title零开销；自定义 tooltip 若大量使用transform或频繁 JS 更新，可能触发重绘
一个真实取舍点：后台管理系统的按钮旁加「删除后不可恢复」提示，用 title 就够；但电商商品卡上要显示「库存仅剩 3 件｜今日下单包邮」，必须用自定义 tooltip——title 压根塞不下两行动态数据。
真正容易被忽略的是可访问性链路：哪怕你写了完美的自定义 tooltip，若没加 aria-describedby 指向提示元素，屏幕阅读器用户依然不知道那块浮层和当前按钮有关联。这点 title 天然解决，也是它至今不可替代的原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
