title 属性是唯一零配置、不触发重排、无需 JS/CSS 即生效的原生悬浮方案，适合静态提示；其他方案如 :hover、position: fixed 或伪元素均隐含样式计算、层叠上下文或事件绑定成本。
title 属性是唯一无需 JS、无需 CSS、不触发重排、零配置就能生效的悬浮方案，适合所有静态提示场景。其他所谓“轻量”方案，只要涉及 :hover、position: fixed 或自定义属性，都隐含样式解析、层叠上下文或事件绑定成本。
为什么 title 是真·原生悬浮
浏览器对 title 的支持是强制性的：只要元素有该属性，悬停即显示系统级 tooltip，不依赖任何外部资源，不阻塞渲染，也不受 CSP 策略限制。
- 不触发 CSSOM 重计算——没有样式规则要匹配，没有伪类要判断
- 不创建新层叠上下文——不会意外遮挡或被遮挡
- 移动端首次点击即触发（iOS Safari 中比
:hover更可靠） - 天然支持键盘焦点（
Tab到元素后，部分浏览器会自动显示title）
:hover + transition 不是“原生”，而是最简 CSS 交互
很多人误把 :hover 当作原生悬浮，其实它只是 CSS 规范的一部分，需完整走样式计算、布局、绘制流水线。真正轻量的关键在于克制使用：
- 只过渡
opacity、transform、color这三类可硬件加速的属性 - 避免用
top/left位移，改用transform: translateY()防止重排 - 禁用
transition: all——它会让未声明初始值的属性（如margin）从 0 开始跳变 - 若需在父容器悬停时显示子层，必须显式写
.parent:hover .child，不能依赖嵌套结构自动生效
别碰 position: fixed 悬浮层，除非你真需要它“钉死视口”
position: fixed 表面看只是加几行 CSS，但实际代价很高：
- 每次滚动都会触发合成器重绘，低端设备易掉帧
- 若父容器有
transform或filter，会意外创建局部层叠上下文，导致z-index失效 - 无法响应
resize或orientationchange自动调整位置，需 JS 补位 - 无障碍支持差：屏幕阅读器通常忽略
fixed元素的语义流，需手动加aria-live或role="tooltip"
真正该警惕的“隐形重量”：伪元素 + :hover 组合
用 ::before/::after 实现箭头、遮罩、气泡，看似没 JS，实则暗藏陷阱：
立即学习“前端免费学习笔记（深入）”；
- 伪元素默认
pointer-events: none，若想点击关闭，必须把事件绑到宿主元素上，逻辑耦合度升高 - 若伪元素含
content: ""且设了background，但宿主元素overflow: hidden，可能裁剪失真 - 在缩放（
Ctrl +）或高 DPR 屏幕下，border+transform: rotate()拼三角箭头极易出现 1px 锯齿，且无法用image-rendering修复 - 伪元素无法设置
tabindex，键盘用户无法聚焦其中内容，违反 WCAG 2.1
title 的局限性恰恰是它的轻量边界：不支持富文本、不支持延迟显示、不支持动态内容。一旦需求越过这条线，就不是“怎么更轻”的问题，而是该换架构了——比如用 Popover API（Chrome 114+）或最小化 React/Vanilla JS 控制器。别拿 CSS 折腾本不属于它的职责。 
