用 CSS 实现鼠标悬停元素时显示工具提示

在网页设计中，为用户提供清晰的交互提示能极大提升用户体验。工具提示作为一种常见且实用的交互元素，当鼠标悬停在特定元素上时显示额外信息，帮助用户快速了解元素功能。使用 CSS 就能轻松实现这一效果。

HTML 结构是基础。创建一个需要添加工具提示的元素，比如一个链接：

<a href="#" class="tooltip">悬停我 <span class="tooltiptext">这是工具提示</span></a>

这里在链接内部嵌入了一个 span 元素，span 元素用于承载工具提示的文本内容，class 类名是为后续 CSS 样式控制做准备。

接着进入关键的 CSS 部分。要让工具提示初始时不可见，并且在鼠标悬停时显示。

.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip.tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip:hover.tooltiptext {
  visibility: visible;
  opacity: 1;
}

在这段 CSS 代码中，先为 tooltip 类设置 position: relative，这是为了让内部绝对定位的工具提示能够相对它进行定位。而 tooltiptext 类中的 visibility: hidden 和 opacity: 0 确保工具提示一开始不可见。背景色、文本颜色、边框半径等样式则是对工具提示外观进行设计。

当鼠标悬停在 tooltip 元素上时，tooltip:hover.tooltiptext 选择器发挥作用，通过将 visibility 设置为 visible 和 opacity 设置为 1，让工具提示平滑地显示出来。

通过这种简单的 CSS 方式，就能轻松实现鼠标悬停元素显示工具提示效果。不仅能让网页交互更加友好，还能有效传达关键信息。合理运用 CSS 的各种属性和选择器，还可以对工具提示的样式进行更多创新和优化，如改变显示位置、添加动画效果等，为用户带来更具吸引力的体验。