title属性最简单但样式不可控、延迟高、不支持html和移动端；css的:hover+::after可自定义样式，适用于静态提示，需相对定位与伪元素绝对定位配合。
用 title 属性最简单，但有局限性
直接在任意 HTML 元素上加 title 属性，浏览器会自动触发悬浮提示（tooltip），比如：
<p title="这是提示文字">把鼠标放上来</p>。它无需 JS、不依赖 CSS，所有主流浏览器都支持。但问题也很明显：样式完全不可控，延迟高（约 1 秒才出现），不能含换行或 HTML，且移动端基本不触发。
用 CSS 的 :hover + ::after 实现自定义 tooltip
适合静态提示、无交互需求的场景。核心是给目标元素设相对定位，再用伪元素绝对定位显示内容：
<span class="tooltip">悬停我</span>
.tooltip { position: relative; }<br>.tooltip::after {<br> content: "自定义提示";<br> position: absolute;<br> bottom: 125%;<br> left: 50%;<br> transform: translateX(-50%);<br> background: #333;<br> color: white;<br> padding: 4px 8px;<br> border-radius: 4px;<br> font-size: 12px;<br> opacity: 0;<br> transition: opacity 0.2s;<br opacity:>注意：必须设 <code>position: relative</code> 才能让 <code>::after</code> 相对于它定位；<code>opacity</code> 比 <code>display: none</code> 更适合过渡动画；移动端需额外加 <code>touchstart</code> 事件才能触发，纯 <code>:hover</code> 在 iOS 上不可靠。
<h3>用 JavaScript 动态控制 tooltip 显示位置和内容</h3>
<p>当提示内容要动态生成、需跟随鼠标移动、或要兼容移动端时，得用 JS。关键点：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img
src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a>
<p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
- 监听
mouseenter创建 tooltip 元素并插入document.body - 用
mousemove实时更新top/left样式（避免遮挡鼠标） - 监听
mouseleave或mouseout移除 tooltip，防止残留 - 移动端需同时监听
touchstart和touchend，且要考虑点击穿透问题
pageX/Y 计算位置时未减去滚动偏移（应改用 clientX/Y 加 window.scrollX/Y）；未设 pointer-events: none 导致 tooltip 阻断下层元素 hover。
用现成库如 tippy.js 节省开发成本
如果项目已引入打包工具（Webpack/Vite），tippy.js 是最省心的选择。安装后一行代码就能启用：
import tippy from 'tippy.js';<br>tippy('#myButton', { content: '提示文字' });它自动处理定位、动画、销毁、键盘导航（Tab 进出）、移动端适配、z-index 管理。但要注意：默认体积约 12KB（gzip 后），若只是几个简单提示，可能过度；另外，content 若传函数，务必确保返回字符串或 DOM 节点，传错会导致静默失败。
真正难的不是“怎么显示”，而是“什么时候隐藏”——尤其在 tooltip 内有按钮、输入框时，mouseleave 会立刻关闭，用户根本点不到。这种场景必须用延时隐藏 + 鼠标移入 tooltip 区域续命，逻辑比看起来复杂得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
