title属性虽零代码但体验差，css伪元素方案需position+attr+transition，js方案适配动态内容与移动端，三者按场景选型。
title 属性最简实现但有硬伤
直接用 title 属性确实能实现鼠标悬停提示，比如 <p title="这是提示内容">文字</p>，浏览器原生支持、零 JS、兼容性极好。但它的问题很实际：title 提示延迟高、无法控制样式、不能含换行或 HTML 标签、移动端基本不触发——尤其在需要定制外观或响应式场景下，它只是“能用”，不是“好用”。
CSS-only tooltip 需要伪元素和 hover 触发
纯 CSS 实现更可控，核心靠 ::before 和 ::after 伪元素 + :hover。关键点在于：父容器必须是 position: relative，提示层用 position: absolute 定位；提示内容得写在 data-tip 属性里，再用 attr(data-tip) 拉出来；过渡动画建议加 opacity 和 visibility 配合，避免鼠标移入时闪跳。
常见错误：忘了给伪元素设 content: ""（否则不渲染）、z-index 太低被遮挡、pointer-events: none 没加导致提示层拦截鼠标移出事件。
span[data-tip] {
position: relative;
cursor: help;
}
span[data-tip]::after {
content: attr(data-tip);
position: absolute;
top: 120%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}
span[data-tip]:hover::after {
opacity: 1;
visibility: visible;
}
JavaScript 控制 tooltip 显示位置和延迟
当提示内容动态生成、需跟随鼠标移动、或要防抖/节流频繁触发时，JS 是绕不开的。推荐监听 mouseenter 和 mouseleave，而非 mouseover——后者会冒泡触发子元素重复显示。真实项目中容易忽略两点：offsetTop/offsetLeft 计算不准（应优先用 getBoundingClientRect()），以及未清理定时器导致 mouseleave 后提示仍残留。
实操建议：
- 用
setTimeout做延迟显示（比如 300ms），避免误触 - 用
clearTimeout在mouseleave时清除待执行的显示逻辑 - 提示框
position: fixed，再通过event.clientX/event.clientY动态设置left/top - 若提示内容含富文本，务必对用户输入做
textContent赋值，防止 XSS
移动端触摸设备的 tooltip 兼容处理
纯 :hover 在 iOS 和 Android Chrome 上基本失效——触摸屏没有“悬停”概念。解决方案只有两个：要么改用点击触发（加 click 事件监听并切换 class），要么依赖第三方库如 tippy.js 内置的触摸适配逻辑。自己写的话，必须同时监听 touchstart 和 click，且注意 preventDefault() 的使用时机，否则可能影响页面滚动。
一个容易被忽略的细节：iOS Safari 对 title 的支持也受限，比如 input 或 button 上的 title 可能完全不显示，这时候 JS 方案几乎是唯一选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
