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：** tooltip 类使用 position:relative，这是定位工具提示文本 (position:absolute) 所必需的。**注意：** 查看下面的示例，了解如何定位工具提示。
tooltiptext 类包含实际的工具提示文本。它默认情况下是隐藏的，并且将在悬停时可见（见下文）。我们也添加了一些基本的样式：120 像素宽度，黑色背景颜色，白色文本颜色，居中文本，以及 5 像素的顶部和底部填充。
CSS border-radius 属性用于向工具提示文本添加圆角。
:hover 选择器用于在用户将鼠标悬停在具有 class="tooltip" 的 <div> 上时显示工具提示文本。
定位工具提示
在本例中，工具提示放置在 "可悬停" 文本 (<div>) 的右侧 (left:105%)。还要注意，top:-5px 用于将其放置在其容器元素的中间。我们使用数字 **5** 因为工具提示文本具有 5 像素的顶部和底部填充。如果你增加它的填充，也要增加 top 属性的值以确保它保持在中间（如果你想要这样）。如果你想将工具提示放置在左侧，也是同样的道理。
如果您希望工具提示出现在顶部或底部，请查看以下示例。请注意，我们使用 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;
}
自己试一试 »
