使用toolTip，鼠标悬停，同时出现好几个提示框如何解决

如果你想在一个元素上悬停时，同时出现多个tooltip，可以考虑使用一些Javascript库，例如Tippy.js和Popper.js。这些库可以帮助你创建定制化的tooltip，并且可以灵活地控制tooltip的位置和行为。

如果你想使用原生的HTML和CSS实现多个tooltip，可以考虑使用CSS伪类和data-属性。你可以在HTML标签上添加一个data-属性，用于标识不同的tooltip内容，并使用CSS伪类`:before`或`:after`来创建tooltip。然后，你可以使用CSS来控制tooltip的位置和样式。

下面是一个使用CSS实现多个tooltip的示例代码：

HTML：

<div class="tooltip" data-tooltip="Tooltip 1">Hover me</div>
<div class="tooltip" data-tooltip="Tooltip 2">Hover me</div>
<div class="tooltip" data-tooltip="Tooltip 3">Hover me</div>

CSS：

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

.tooltip:before {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5em;
  background-color: #333;
  color: #fff;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.tooltip:hover:before {
  opacity: 1;
  visibility: visible;
}

这段代码中，我们使用了`:before`伪类来创建tooltip，并使用`attr(data-tooltip)`获取了HTML标签上的`data-tooltip`属性来作为tooltip的内容。在`.tooltip`类中，我们将`position`属性设置为`relative`，这样我们就可以使用绝对定位来控制tooltip的位置。然后，我们使用`top: 100%;`和`left: 50%;`将tooltip放置在元素的底部中心位置，并使用`transform: translateX(-50%);`将tooltip水平居中。最后，我们使用`opacity`和`visibility`属性来控制tooltip的显示和隐藏，并使用`transition`属性实现平滑过渡效果。