如何使用 CSS 实现气泡提示框效果？

可以使用CSS的伪元素和定位来实现气泡提示框效果。

首先，我们需要在HTML中创建一个容器元素，并在其中添加需要显示提示框的内容。例如：

<div class="tooltip">
  <h3>这是一个提示框</h3>
  <p>这里是提示框的内容</p>
</div>

接下来，我们可以使用CSS来定义提示框的样式。我们需要为容器元素设置相对定位，并为其添加一个伪元素来创建提示框的三角形。例如：

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #555 transparent;
}

在上面的代码中，我们使用了伪元素:before来创建提示框的三角形。我们设置其绝对定位，并通过top、left和transform属性来将其定位在容器元素的顶部中央。我们还使用border-style、border-width和border-color属性来定义三角形的样式。

接下来，我们需要为提示框添加背景颜色、边框、圆角和阴影等样式。例如：

.tooltip {
  position: relative;
  display: inline-block;
  padding: 10px;
  background-color: #555;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.tooltip:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #555 transparent;
}

在上面的代码中，我们为容器元素添加了padding、background-color、color、border-radius和box-shadow等样式，以使其看起来更像一个气泡提示框。

最后，我们可以通过设置提示框的display属性为none，然后在鼠标悬停在容器元素上时将其设置为block来实现鼠标悬停显示提示框的效果。例如：

.tooltip {
  position: relative;
  display: inline-block;
  padding: 10px;
  background-color: #555;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  display: none;
}

.tooltip:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #555 transparent;
}

.tooltip:hover {
  display: block;
}

在上面的代码中，我们为提示框设置了display:none，然后使用:hover伪类来在鼠标悬停时将其设置为display:block，从而实现鼠标悬停显示提示框的效果。

完整代码示例:

<div class="tooltip">
  <h3>这是一个提示框</h3>
  <p>这里是提示框的内容</p>
</div>

.tooltip {
  position: relative;
  display: inline-block;
  padding: 10px;
  background-color: #555;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  display: none;
}

.tooltip:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #555 transparent;
}

.tooltip:hover {
  display: block;
}