当前位置：首页 > CSS

css3 制作tips

2026-02-27 00:40:10CSS

CSS3 制作 Tooltips 的方法

使用 ::before 和 ::after 伪元素创建基础 Tooltip

通过伪元素生成提示框的内容和箭头，结合 content 属性填充文本。示例代码：

.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
}

添加箭头效果

通过伪元素的边框技巧实现三角形箭头：

.tooltip:hover::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

动画过渡效果

css3 制作tips

结合 CSS3 的 transition 实现平滑显示：

.tooltip::after {
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
}
.tooltip:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-5px);
}

响应式多行 Tooltip

通过调整 white-space 属性支持多行文本：

css3 制作tips

.tooltip-multiline::after {
  white-space: normal;
  width: 200px;
  text-align: center;
}

不同定位方向的变体

通过修改定位属性实现不同方向的提示：

/* 右侧提示 */
.tooltip-right::after {
  left: 100%;
  bottom: 50%;
  transform: translateY(50%);
}
/* 底部提示 */
.tooltip-bottom::after {
  top: 100%;
  bottom: auto;
}

注意事项