用 position: absolute 配合 :hover 实现 tooltip，需外层 relative 定位、内部 absolute 提示框精确定位，并通过 opacity/visibility 控制显隐与过渡；支持上下左右多方向变体及 pointer-events、box-shadow 等可用性优化。
用 position: absolute 配合 :hover 实现悬浮提示（tooltip），核心是让提示框相对于触发元素精确定位，并在鼠标悬停时显示。关键在于父容器设 position: relative，子提示框用 absolute 脱离文档流并定位，再通过 opacity 或 visibility 控制显隐。
HTML 结构要嵌套清晰
提示文字必须放在触发元素内部或紧邻的子容器中，推荐用包裹结构，方便定位和控制：
- 外层容器（如
<div class="tooltip">）设 <code>position: relative - 触发元素（如按钮或文字）作为直接子元素
- 提示内容（
<span class="tooltip-text"></span>）也作为子元素，初始隐藏
CSS 定位与显隐控制
给外层加 relative，让内部 absolute 的提示框以它为参考点；用 :hover 触发显示，避免使用 display: none/block（会导致过渡失效）：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
.tooltip {
position: relative;
display: inline-block; /* 保持行内尺寸 */
}
<p>.tooltip-text {
position: absolute;
top: 125%; /<em> 在触发元素下方 </em>/
left: 50%;
transform: translateX(-50%); /<em> 水平居中 </em>/
background: #333;
color: #fff;
padding: 6px 12px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
z-index: 1000;
}</p><p>.tooltip:hover .tooltip-text {
opacity: 1;
visibility: visible;
}常见位置变体写法
只需改 top/bottom、left/right 和 transform 即可适配不同方向：
立即学习“前端免费学习笔记（深入）”；
- 上方提示：
top: auto; bottom: 125%; transform: translateX(-50%) - 右侧提示：
top: 50%; left: 125%; transform: translateY(-50%) - 左侧提示：
top: 50%; right: 125%; transform: translateY(-50%)
增强可用性的小细节
真实项目中建议补充这些优化：
- 加
pointer-events: none到提示框上，防止遮挡下层交互 - 对
.tooltip-text设置pointer-events: auto（如需点击） - 用
min-width防止过窄，加box-shadow提升层次感 - 必要时加
@media降低移动端 hover 效果（触屏设备无 hover）
