CSS 提示工具(Tooltip)

在网页开发中，提示工具（Tooltip）是一种常见的交互元素，用于在用户将鼠标悬停在某个元素上时显示相关信息。CSS 提示工具可以为用户提供额外的信息或说明，提升用户体验。

创建基本的 Tooltip 样式

要创建一个基本的 Tooltip 样式，我们可以使用 CSS 的 ::before 伪元素来实现。首先，我们需要为需要显示 Tooltip 的元素添加一个 data-tooltip 属性，该属性的值即为 Tooltip 中需要显示的内容。

<button data-tooltip="这是一个提示工具">Hover over me</button>

接下来，我们可以使用 CSS 来为这个元素添加 Tooltip 样式：

// www.javascriptcn.com code example
button {
  position: relative;
}

button::before {
  content: attr(data-tooltip);
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  display: none;
}

button:hover::before {
  display: block;
}

在上面的示例中，我们为 button 元素添加了一个 ::before 伪元素，通过 content: attr(data-tooltip) 来获取 data-tooltip 属性的值作为 Tooltip 的内容。然后通过设置 position: absolute 将 Tooltip 定位在按钮的上方，并通过 display: none 来隐藏 Tooltip。当鼠标悬停在按钮上时，通过 button:hover::before 来显示 Tooltip。

定制 Tooltip 样式

除了基本的 Tooltip 样式外，我们还可以通过调整样式来定制 Tooltip 的外观。例如，我们可以修改背景颜色、字体样式、边框样式等。

// www.javascriptcn.com code example
button::before {
  content: attr(data-tooltip);
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #007bff;
  color: #fff;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
}

在上面的示例中，我们修改了 Tooltip 的背景颜色为蓝色，字体颜色为白色，字体大小为 14px，并设置了粗体字体。通过调整这些样式，我们可以根据实际需求定制出符合设计要求的 Tooltip 样式。

通过以上的示例，我们可以看到如何使用 CSS 创建和定制 Tooltip 样式，希望这部分内容有助于你在 web 开发中使用提示工具提升用户体验。