使用CSS伪元素和data属性可创建简洁提示框，通过::after显示内容、::before制作箭头，结合hover触发，支持多方向调整与平滑动画，无需额外标签，轻量实用。
制作一个简单的提示框（tooltip）可以通过CSS结合HTML的title属性或自定义属性来实现，再利用伪元素 ::before 或 ::after 来创建提示内容和小箭头。这种方式无需额外的HTML标签，简洁又实用。
基本结构与样式
先写一个带有提示信息的元素，比如一个按钮或链接：
<button class="tooltip" data-tip="这是提示内容">悬停我</button>
使用 data-tip 属性存储提示文字，这样更灵活且语义清晰。
基础CSS设置：
.tooltip {
position: relative;
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
cursor: pointer;
}
使用伪元素显示提示内容
通过 ::after 伪元素插入提示文本，初始状态隐藏：
.tooltip::after {
content: attr(data-tip); /* 获取data-tip的内容 */
position: absolute;
top: -50px; /* 显示在元素上方 */
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 6px 10px;
font-size: 14px;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none; /* 避免干扰鼠标事件 */
transition: opacity 0.3s ease;
}
当鼠标悬停时显示提示框：
.tooltip:hover::after {
opacity: 1;
visibility: visible;
}
添加小箭头（三角形）
用 ::before 伪元素制作指向下方的小箭头：
.tooltip::before {
content: '';
position: absolute;
top: -10px; /* 箭头位于提示框上方 */
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #333; /* 箭头颜色与提示框一致 */
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease;
}
<p>.tooltip:hover::before {
opacity: 1;
visibility: visible;
}</p>这样就形成了一个带小箭头的美观提示框。
调整位置与其他方向
如果想让提示框出现在其他方向（如底部、左侧、右侧），只需修改定位和箭头方向。例如，下方提示：
- top: 100%; 把提示框放在元素下方
- border-bottom: 8px solid #333; 箭头朝上
- top: auto; bottom: -10px; 箭头放底部
也可以通过添加类名来控制不同方向，比如 data-position="bottom"，然后用CSS判断处理。
基本上就这些。使用伪元素制作tooltip干净、高效，还能轻松添加动画和样式，适合大多数轻量级场景。不复杂但容易忽略细节，比如visibility配合opacity避免布局抖动，以及pointer-events: none防止交互干扰。基本上按这个结构改一改就能用在项目里了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
