前端必知必会-CSS 工具提示Tooltip

---

CSS 工具提示

使用 CSS 创建工具提示。

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

基本工具提示

创建在用户将鼠标移到元素上时显示的工具提示：

示例

<style>
/* 工具提示容器 */
.tooltip {
position:relative;
display:inline-block;
border-bottom:1px dotted black; /* 如果您希望在可悬停文本下显示点 */
}

/* 工具提示文本 */
.tooltip .tooltiptext {
visibility:hidden;
width:120px;
background-color:black;
color:#fff;
text-align:center;
padding:5px 0;
border-radius:6px;

/* 定位工具提示文本 - 参见下面的示例！*/
position:absolute;
z-index:1;
}

/* 当鼠标悬停在工具提示容器上时显示工具提示文本 */
.tooltip:hover .tooltiptext {
visibility:visible;
}
</style>

<div class="tooltip">将鼠标悬停在我身上
<span class="tooltiptext">工具提示文本</span>
</div>

示例说明
HTML：使用容器元素（如 <div>）并向其添加“tooltip”类。当用户将鼠标悬停在此 <div> 上时，它将显示工具提示文本。

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

CSS：工具提示类使用 position:relative，这是定位工具提示文本（position:absolute）所必需的。注意：请参阅以下有关如何定位工具提示的示例。

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

CSS border-radius 属性用于为工具提示文本添加圆角。

:hover 选择器用于在用户将鼠标移到带有 class=“tooltip” 的 <div> 上时显示工具提示文本。

定位工具提示

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

右侧工具提示

.tooltip .tooltiptext {
top: -5px;
left: 105%;
}

结果：

左侧工具提示

.tooltip .tooltiptext {
top: -5px;
right: 105%;
}

结果：

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

顶部工具提示

.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* 使用一半的宽度 (120/2 = 60)，使工具提示居中 */
}

结果：

底部工具提示

.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* 使用一半的宽度 (120/2 = 60)，使工具提示居中 */
}

结果：

工具提示箭头

要创建应从工具提示特定侧出现的箭头，请在工具提示后添加“空”内容，并使用伪元素类 ::after 和 content 属性。箭头本身是使用边框创建的。这将使工具提示看起来像一个气泡。

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

底部箭头

.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* 在工具提示的底部 */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}

结果：

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

注意：border-width 属性指定箭头的大小。如果更改此属性，也请将 margin-left 值更改为相同值。这将使箭头保持居中。

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

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

顶部箭头

.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* 在工具提示顶部 */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}

结果：

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

左箭头

.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /
* 工具提示左侧 */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}

结果：

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

右箭头

.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* 工具提示右侧 */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}

结果：

淡入工具提示（动画）

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

示例

.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
opacity: 1;
}

---

总结

本文介绍了CSS 工具提示Tooltip的使用，如有问题欢迎私信和评论