HTML原生title属性能当tooltip用但不推荐；它无法自定义样式、不支持HTML、移动端失效且交互不可控；正式场景应选CSS伪元素、JS动态控制或Tippy.js等方案。
HTML 原生 title 属性能当 tooltip 用吗？
能，但不推荐用于正式交互。把 title 加在任意标签上（比如 <span title="这是提示">悬停我</span>），浏览器会默认显示小黄框。但它有硬伤：无法自定义样式、不支持 HTML 内容、移动端基本不触发、延迟和消失时机不可控。
如果你只是临时调试或内部页面凑合用，title 算是零成本方案；但只要涉及用户可见的提示，就得换更可控的方式。
用 CSS + :hover 实现纯前端 tooltip（无 JS）
适合静态内容、不需动态更新、且只在桌面端展示的场景。核心思路是用 data-tooltip 存文本，靠伪元素 ::before 或 ::after 渲染提示框。
- 必须给触发元素设
position: relative，否则提示框定位会飘 - 提示内容用
data-tooltip="xxx"，别用title——避免和原生冲突 - 用
opacity+transition实现淡入，比visibility: hidden/visible更顺滑 - 注意 z-index：tooltip 很容易被其他绝对定位元素盖住
<span class="tooltip" data-tooltip="支持换行<br>和简单 HTML">悬停我</span>
.tooltip {
position: relative;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
opacity: 0;
transition: opacity 0.2s;
pointer-events: none;
}
.tooltip:hover::after {
opacity: 1;
}
用 JavaScript 控制 tooltip 显示逻辑（兼容移动端）
要支持点击唤出、键盘焦点（如 Tab 进入）、关闭按钮、异步加载内容，就得上 JS。关键不是“写多少代码”，而是**控制触发时机和销毁时机**。
立即学习“前端免费学习笔记（深入）”；
- 监听
mouseenter/focus显示，mouseleave/blur隐藏，但加个setTimeout防止划过时闪退 - 移动端没有 hover，得监听
click，并用touchstart兼容老 iOS - tooltip 元素建议插入到
document.body下，避免父容器overflow: hidden把它裁掉 - 每次显示前检查是否已存在旧 tooltip，先
.remove()再新建，防止内存泄漏
示例片段（不依赖框架）：
function showTooltip(el, text) {
const tooltip = document.createElement('div');
tooltip.className = 'custom-tooltip';
tooltip.textContent = text;
tooltip.style.position = 'absolute';
// 计算位置略（可用 getBoundingClientRect）
document.body.appendChild(tooltip);
el.addEventListener('mouseleave', () => {
setTimeout(() => tooltip.remove(), 300);
});
}
用现成库（Tippy.js）快速落地，但要注意什么？
tippy.js 是目前最轻量又健壮的选择（gzip 后约 5KB），比 Bootstrap Tooltip 更专注、比 Popper.js 更易上手。但它不是“装上就完事”。
- 别直接全局初始化所有
[data-tippy]——页面元素多时卡顿，按需调用tippy(selector, options) - 动画默认用 CSS transitions，若要更复杂动效（如弹跳），得配
animateFill: false并自己写 keyframes - 内容含 HTML？设
allowHTML: true，但务必确保来源可信，否则 XSS - SSR 场景下，服务端渲染时
tippy不生效，得等useEffect或DOMContentLoaded后再初始化
最简调用：
<button data-tippy="这是一个 tooltip">按钮</button>
<script src="https://unpkg.com/tippy.js@6"</script>
<script>tippy('[data-tippy]');</script>
tooltip 的真正难点不在“怎么画出来”，而在“什么时候出现、什么时候消失、出现在哪、会不会挡住内容、会不会影响可访问性”。尤其当页面有滚动、缩放、暗色模式时，一个没考虑 getBoundingClientRect 更新时机的 tooltip 会瞬间错位。动手前，先想清楚它的生命周期比写样式更重要。
