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