通过CSS定位与伪元素可实现无额外标签的Tooltip，首先设置父元素relative定位，伪元素absolute定位并利用content属性读取data-tip内容，结合visibility和opacity控制显隐，在::before或::after中用border技巧创建指向箭头，通过添加方向类如.top、.bottom调整位置及箭头朝向，实现灵活多向提示效果。
工具提示（Tooltip）在网页中很常见，通常用于展示额外信息。通过结合 CSS 的 定位（position） 与 伪元素（::before 或 ::after），可以实现美观且灵活的 Tooltip 效果。下面介绍如何实现。
1. 基础结构与定位原理
要让 Tooltip 准确出现在目标元素附近，关键是父元素设置相对定位，伪元素使用绝对定位。
• 父元素（触发元素）设为 position: relative，作为定位上下文。• 伪元素使用 position: absolute，相对于父元素定位。
• 利用 top、left、right、bottom 调整 Tooltip 位置。
示例 HTML：
悬停我
立即学习“前端免费学习笔记（深入）”；
2. 使用伪元素创建 Tooltip 内容
CSS 中利用 ::before 或 ::after 生成 Tooltip 框和箭头。
• 使用 content 属性显示 data-tip 的值。• 设置背景、圆角、文字样式美化提示框。
• 配合 visibility 和 opacity 控制显示隐藏。
核心 CSS 示例：
.tooltip {
position: relative;
display: inline-block;
}
.tooltip::after {
content: attr(data-tip);
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 6px 10px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.tooltip:hover::after {
opacity: 1;
visibility: visible;
}
3. 添加三角箭头（小尖角）
使用另一个伪元素或 ::after 的边框技巧制作指向箭头。
• 在 ::after 中添加一个用 border 构成的小三角。• 将三角单独用 ::before 实现更清晰。
添加箭头的代码：
.tooltip::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #333;
}
4. 多方向定位支持
通过自定义属性或类控制 Tooltip 显示方向（上、下、左、右）。
• 添加类如 .top、.bottom 调整定位和箭头位置。• 利用 CSS 自定义属性动态传参（高级用法）。
例如向下显示：
.tooltip.bottom::after {
top: 125%;
bottom: auto;
}
.tooltip.bottom::before {
top: 100%;
bottom: auto;
border-top: none;
border-bottom: 5px solid #333;
}
基本上就这些。通过合理使用 position 与伪元素，无需额外 HTML 标签就能实现干净、可复用的 Tooltip。关键是掌握定位上下文和伪元素生成内容的技巧。不复杂但容易忽略细节，比如 pointer-events 和 transform 对齐。
