title属性仅适用于纯文本基础提示，无法定制样式、不支持html、移动端失效；现代方案首选css+data-*属性:hover实现，或用popover api/tippy.js等可控方案。
title 属性能实现气泡提示，但仅限基础场景
直接给元素加 title 属性确实能触发浏览器原生气泡（tooltip），鼠标悬停几秒后自动出现。但它不是“可控”的 UI 组件：无法定制样式、不能绑定点击事件、不支持 HTML 内容、移动端基本不可用（iOS Safari 完全不触发），且延迟和消失时机由浏览器决定，无法调整。
适合快速标注表单字段、图标含义等纯文本辅助说明，比如：
<input type="text" title="请输入 6–20 位字母或数字">
但只要涉及设计一致性、多行文案、图标/链接嵌入，title 就该被放弃。
现代方案首选 CSS + data-* 属性 + :hover
不用 JS 就能做出轻量、可样式化、响应式的气泡，核心是利用 data-tooltip 存文案，配合伪元素 ::before 或 ::after 渲染气泡框。
关键点：
-
position: relative在触发元素上必须设置，否则气泡定位会错乱 - 气泡默认
opacity: 0; visibility: hidden;，用:hover切换状态，避免闪动 - 加
transition: opacity 0.2s让出现更自然，但不要对visibility做过渡（不生效） - 移动端需额外加
touch-action: manipulation提升响应灵敏度
示例结构：
<button data-tooltip="保存当前配置">?</button>
JavaScript 方案要避开 tooltip.js 等重型库
如果需要动态内容、箭头定位、键盘焦点支持（如无障碍访问）、或与 Popover API 集成，用原生 Element.setAttribute('aria-describedby', id) 配合 Popover API（Chrome 114+）最轻量。旧浏览器 fallback 可用 Tippy.js —— 它体积小（gzip 后 ~4KB）、无依赖、支持虚拟滚动和动画。
容易踩的坑：
- 用
title属性初始化 Tippy 时，记得先清空title，否则原生气泡和 Tippy 同时出现 - Tippy 默认禁用 pointer-events，若气泡内需放按钮，得手动设
interactive: true - 不要在循环中反复调用
tippy()，应批量初始化或委托到父容器
移动端气泡必须主动触发，不能依赖 hover
所有基于 :hover 的纯 CSS 气泡在 iOS 和 Android Chrome 中几乎无效——触屏设备没有“悬停”概念。真实可用的做法只有两种：
- 把气泡改成点击展开（
click事件 +aria-expanded控制） - 用
focus+blur模拟（适用于表单控件，配合tabindex）
如果强行保留 hover 行为，至少加 @media (hover: hover) and (pointer: fine) 媒体查询做隔离，避免移动端加载冗余样式。
气泡提示真正难的从来不是“怎么显示”，而是“什么时候显示、对谁显示、怎么收回去”。title 把这些都交给了浏览器，而项目里往往需要的是确定性。
