CSS 工具提示

使用 CSS 创建工具提示。

演示：工具提示示例

当用户将鼠标指针移到某个元素上时，工具提示通常用于指定有关某些内容的额外信息：

基本工具提示

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

示例解释

HTML：使用容器元素（如 <div>）并添加"tooltip"类给它。当用户将鼠标悬停在该 <div> 上时，它将显示工具提示文本。

工具提示文本放置在内联元素（如 <span>）内class="tooltiptext"。

CSS：这个tooltip课堂使用position:relative，需要它来定位工具提示文本（position:absolute）。笔记：有关如何定位工具提示的示例，请参阅下面的示例。

这个tooltiptext类保存实际的工具提示文本。它默认隐藏，悬停时可见（见下文）。我们还添加了一些基本样式：120px 宽度、黑色背景颜色、白色文本颜色、居中文本以及 5px 顶部和底部填充。

CSSborder-radius属性用于向工具提示文本添加圆角。

这个:hover选择器用于当用户将鼠标移动到 <div> 上时显示工具提示文本class="tooltip"。

定位工具提示

在此示例中，工具提示位于右侧 (left:105%) "hoverable" 文本 (<div>)。另请注意top:-5px用于将其放置在其容器元素的中间。我们使用号码5因为工具提示文本的顶部和底部填充均为 5 像素。如果增加其填充，也会增加top属性以确保它位于中间（如果这是您想要的）。如果您希望将工具提示放置在左侧，则同样适用。

如果您希望工具提示显示在顶部或底部，请参阅下面的示例。请注意，我们使用margin-left属性的值为负 60 像素。这是为了将工具提示置于可悬停文本上方/下方的中心。它设置为工具提示宽度的一半 (120/2 = 60)。

工具提示箭头

要创建应从工具提示的特定一侧显示的箭头，请使用伪元素类在工具提示后添加 "empty" 内容::after与content属性。箭头本身是使用边框创建的。这将使工具提示看起来像一个对话框。

此示例演示如何将箭头添加到工具提示的底部：

示例解释

将箭头放置在工具提示内：top: 100%会将箭头放置在工具提示的底部。left: 50%将使箭头居中。

笔记：这个border-width属性指定箭头的大小。如果你改变这个，也改变margin-left值相同。这将使箭头保持居中。

这个border-color用于将内容转换为箭头。我们将顶部边框设置为黑色，其余部分设置为透明。如果所有面都是黑色的，你最终会得到一个黑色的方形盒子。

此示例演示如何将箭头添加到工具提示的顶部。请注意，我们这次设置了底部边框颜色：

此示例演示如何在工具提示左侧添加箭头：

此示例演示如何在工具提示右侧添加箭头：

淡入工具提示（动画）

如果你想在工具提示文本即将可见时淡入淡出，你可以使用 CSStransition属性连同opacity属性，并在指定的秒数内（在我们的示例中为 1 秒）从完全不可见变为 100% 可见：