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}  .tooltip:hover::after { opacity: 1; }

注意：必须设 position: relative 才能让 ::after 相对于它定位；opacity 比 display: none 更适合过渡动画；移动端需额外加 touchstart 事件才能触发，纯 :hover 在 iOS 上不可靠。

用 JavaScript 动态控制 tooltip 显示位置和内容

当提示内容要动态生成、需跟随鼠标移动、或要兼容移动端时，得用 JS。关键点：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 监听 mouseenter 创建 tooltip 元素并插入 document.body
• 用 mousemove 实时更新 top/left 样式（避免遮挡鼠标）
• 监听 mouseleave 或 mouseout 移除 tooltip，防止残留
• 移动端需同时监听 touchstart 和 touchend，且要考虑点击穿透问题

常见坑：没清空旧 tooltip 导致多个重叠；用 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 区域续命，逻辑比看起来复杂得多。