title属性仅适用于非关键兜底提示，不可当tooltip用；它无样式控制、不支持HTML、移动端基本失效，且无障碍支持弱，仅宜用于简短辅助文本场景。
title 属性能用，但别当 tooltip 用
浏览器原生 title 属性确实能弹出小黄框，但它不可控：无法定制样式、不能加 HTML 内容、移动端基本不触发、延迟和消失时机由系统决定。真要做交互提示，它只是个 fallback，不是解决方案。
实操建议：
- 只在纯辅助场景（比如表单字段说明）用
title，且确保内容简短、无换行 - 不要给按钮或链接加长
title，iOS Safari 下几乎不响应长按 - 若需兼容极老浏览器（IE8 及以下），再考虑用
title+ JS 模拟，否则直接跳过
用 CSS + :hover 实现轻量 tooltip（无 JS）
适合静态内容、鼠标悬停触发、不需支持触摸设备的场景。核心是靠 position: absolute 定位 + visibility 或 opacity 控制显隐，避免用 display: none（会破坏过渡动画）。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<span class="tooltip"> hover me <span class="tooltip-text">这是提示文字</span> </span>
关键 CSS：
.tooltip {
position: relative;
}
.tooltip-text {
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
visibility: hidden;
opacity: 0;
transition: opacity 0.2s, visibility 0.2s;
}
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
注意点：
-
z-index要设够高，否则被父容器裁剪（尤其在overflow: hidden的卡片里） - 移动端不会触发
:hover，所以这个方案默认不兼容手机 - 不要用
pointer-events: none在 tooltip 上，否则悬停会立刻消失
用 JavaScript 控制显示逻辑（支持触摸与键盘）
真正可用的 tooltip 必须响应点击（移动端）、聚焦（键盘导航）、延迟显示/隐藏，并能处理位置冲突。推荐用 mouseenter/focus 显示，mouseleave/blur 隐藏，加防抖防止闪动。
核心逻辑片段：
const tooltip = document.querySelector('.tooltip');
const tooltipEl = document.querySelector('.tooltip-text');
tooltip.addEventListener('mouseenter', () => {
clearTimeout(tooltip.timeout);
tooltipEl.style.visibility = 'visible';
tooltipEl.style.opacity = '1';
});
tooltip.addEventListener('mouseleave', () => {
tooltip.timeout = setTimeout(() => {
tooltipEl.style.visibility = 'hidden';
tooltipEl.style.opacity = '0';
}, 300);
});
更稳妥的做法：
- 用
getBoundingClientRect()动态计算 tooltip 位置，避开视口边缘 - 监听
window.resize和scroll，重新定位 tooltip - 对屏幕阅读器添加
aria-describedby和role="tooltip" - 移动端可绑定
click替代mouseenter，并点击空白处关闭
别自己造轮子：用 Popper.js 或 Tippy.js
手写 tooltip 定位容易翻车——边界检测、滚动跟随、flip、offset、arrow 等逻辑非常琐碎。Popper.js 是底层定位引擎，Tippy.js 是开箱即用的封装，两者都已解决 Safari iOS 位置偏移、iframe 内嵌、CSS 缩放等真实坑点。
一行引入 Tippy：
<script src="https://unpkg.com/tippy.js@6"></script>
然后：
tippy('.tooltip-trigger', {
content: '这是带箭头的提示',
placement: 'top',
delay: [200, 0],
arrow: true,
theme: 'light'
});
关键提醒：
- Tippy 默认禁用移动端
hover，但支持touch: true开启长按触发 - 如果页面已有
body { overflow: hidden }（比如弹窗打开时），Tippy 可能错位，需加appendTo: () => document.body - SSR 场景下（如 Next.js），必须在
useEffect或componentDidMount中初始化，否则服务端报错
复杂点不在怎么写，而在什么时候关掉它——比如 tooltip 弹出后用户点了其他区域，或者表单提交了，这些状态清理很容易被忽略。
