使用 CSS 创建当用户将鼠标移动到元素上时出现的工具提示

什么是工具提示？

工具提示（Tooltip）是指在用户将鼠标指针悬停在一个元素上时，出现的简短说明或解释的小框，通常用来解释一些复杂的操作或提供更详细的信息。在网页设计和开发中，工具提示经常被使用，它能够帮助用户更好地理解页面内容并提高用户体验。

CSS 创建工具提示

在 CSS 中，我们可以使用 :hover 选择器来控制当用户将鼠标悬停在元素上时应如何呈现该元素。因此，我们可以通过添加一些 CSS 样式来创建自己的工具提示。

步骤1：创建 HTML

首先，我们需要在 HTML 中创建一个元素，当用户将鼠标悬停在该元素上时，将显示工具提示。通常，该元素是一个带有标题的链接、图像、按钮或其他互动元素。

在本例中，我们将创建一个按钮，并在其中添加了一个提示文本：

<button class="tooltip">Hover me!

  <span class="tooltiptext">I am a tooltip.</span>
</button>

这里我们使用了 <button> 元素，给它添加了 "tooltip" 类名。同时，我们还在按钮内部添加了一个带有 "tooltiptext" 类名的 <span> 元素，作为工具提示的文本。

步骤2：添加 CSS 样式

接下来，在 CSS 文件中添加以下代码：

/* Tooltip container */

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* Add a dotted bottom border */
}
/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

这里我们定义了两个类名： "tooltip" 和 "tooltiptext"。其中， "tooltip" 类名用于包裹按钮，并添加了一些基本的样式，比如 position:relative;，使得工具提示能够基于按钮的位置进行定位。

"tooltiptext" 类名用于定义工具提示的外观。我们为它设置了背景颜色、文本颜色、圆角边框、内边距等样式。同时，我们还将它的可见性设置为 hidden，这样在鼠标未经过按钮时就不会显示。

最后，我们使用 :hover 选择器，在用户将鼠标悬停在按钮上时将工具提示的可见性设置为 visible。

改善工具提示的可访问性

虽然我们已经可以成功地创建一个工具提示，但是还有一些优化可以使它更具有可访问性。例如，当用户没有使用鼠标时，他们将无法看到该工具提示。

为了改善可访问性，我们需要在 HTML 中添加一些标志，以便屏幕阅读器和其他辅助工具能够理解这些工具提示。我们可以使用 <title> 属性来添加这些标记。例如：

<button class="tooltip" title="I am a tooltip">

  Hover me!<span class="tooltiptext">I am a tooltip.</span>
</button>

通过使用 title 属性，我们可以将工具提示的文本添加到按钮的 HTML 标记中。这样，在用户使用屏幕阅读器或其他辅助工具时，它们将能够读取并提供有关该元素的更多信息。

总结

使用 CSS 来创建工具提示是一种简便的方法，可以在网页中添加有用的附加信息，以帮助用户更好地理解页面内容并提高用户体验。通过添加一些身体的样式和可访问性的标记，我们可以改善这些工具提示的可视性和可访问性。