使用 CSS 将箭头指向工具提示底部

介绍

工具提示是网页设计中非常重要的一部分，它提供了一种简单的方式来让用户了解一些附加信息。另外，箭头也是一个很实用的元素，可以帮助用户直观地理解各种界面元素之间的关系。

本篇文章将讨论如何使用 CSS 将箭头指向工具提示底部。

原理

在这里，我们将使用 CSS 伪类和定位来实现箭头。我们将在工具提示的底部放置一个块元素，将箭头放置在块元素的顶部。

块元素的实现方法

我们将创建一个块级元素作为工具提示的底部。该元素被放置在工具提示的底部。

.tooltip {

  position: relative;
}
.tooltip::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top-color: #333;
}

在上面的代码中，我们使用伪类 ::after 来为工具提示添加箭头。注意到我们把工具提示的 position 属性设置成了 relative，而箭头的 position 属性设置成了 absolute。这是因为我们需要放置在工具提示的位置上方。

箭头的实现方法

接下来，我们将添加箭头。箭头的位置应该在块元素的顶部。

.tooltip::before {

  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-bottom-color: #333;
}

在上方代码中，我们使用了 ::before 伪类来为工具提示添加箭头。注意到我们把箭头的 position 属性设置成了 absolute，并使用 bottom 属性来将其放置在块元素的顶部。

代码实现

现在，我们有了块元素和箭头的实现方法。下面，我们将把它们合并，并完善样式。

.tooltip {

  position: relative;
}
.tooltip::before, .tooltip::after {
  position: absolute;
  display: block;
  border: 10px solid transparent;
}
.tooltip::before {
  content: "";
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: #333;
}
.tooltip::after {
  content: "";
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  border-top-color: #333;
}
/* 完善样式 */
.tooltip {
  color: #fff;
  background-color: #333;
  padding: .5rem;
  text-align: center;
  max-width: 200px;
  border-radius: .5rem;
}

效果预览

最终，我们得到了一个非常简单的工具提示样式，它包含了漂亮的箭头效果。下面是这个样式的效果预览。