CSS 带有三角形的工具提示

在本文中，我们将介绍如何使用CSS创建带有三角形的工具提示（Tooltip）。工具提示是一种用于提供额外信息的小型浮动框，常见于网页设计中。通过添加一个三角形指示器，工具提示可以更好地与设计融合，并吸引用户的注意力。

阅读更多：CSS 教程

实现基本的工具提示框

首先，我们需要创建一个基本的工具提示框。我们可以使用HTML和CSS来完成这个任务。以下是示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -70px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
</head>
<body>

<h2>示例工具提示框</h2>
<p>把鼠标移到下面的文本上：</p>

<div class="tooltip">
  Hover over me
  <span class="tooltiptext">这是一个示例工具提示框</span>
</div>

</body>
</html>

在上面的代码中，我们使用了.tooltip类来定义一个包含工具提示的容器。.tooltiptext类用于定义工具提示框的样式。

工具提示框的关键样式包括：
– visibility: hidden;：初始时将工具提示框隐藏；
– visibility: visible;：当鼠标悬停在工具提示容器上时，将工具提示框显示出来；
– position: absolute;：将工具提示框的位置设置为绝对定位，以便于控制其显示位置；
– bottom: 125%; 和 left: 50%;：将工具提示框放置在工具提示容器的正上方，并稍微偏左；
– margin-left: -70px;：通过负值的外边距将工具提示框居中。

通过添加样式hover伪类，当鼠标悬停在.tooltip容器上时，.tooltiptext的visibility样式将被更改，从而显示工具提示框。

现在，我们已经创建了一个基本的工具提示框，但是它还没有三角形指示器。接下来，我们将介绍如何实现带有三角形指示器的工具提示框。

添加三角形指示器

在我们的工具提示框中，我们希望在顶部显示一个三角形指示器。我们可以使用CSS的一些技巧来模拟一个三角形形状，然后将其添加到工具提示框中。

以下是示例代码：

.tooltip .tooltiptext::before {
  content: "";
  position: absolute;
  bottom: 100%;  /* 位于工具提示框的上方 */
  left: 50%;
  margin-left: -5px;  /* 设置为箭头的宽度的一半 */
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;  /* 设置箭头颜色 */
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -3px;
  border-width: 3px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

在上面的代码中，我们使用伪元素::before和::after来创建三角形指示器。通过调整border-width和border-color属性的值，我们可以控制三角形的大小和颜色。

content: ""用于创建一个空的内容，这样伪元素才能显示。

通过将三角形元素的样式添加到.tooltiptext类下，我们将这些元素添加到工具提示框中。::before表示三角形指示器位于工具提示框内部，而::after表示三角形指示器位于工具提示框外部。

现在，我们已经成功地创建了带有三角形指示器的工具提示框！