手册
目录
当用户将鼠标指针移到元素上时，工具提示通常用于提供关于某内容的额外信息：
Top Tooltip text Right Tooltip text Bottom Tooltip text Left Tooltip text创建一个鼠标移到元素上时显示的工具提示：
运行实例 »Hover over me Tooltip text
点击 "运行实例" 按钮查看在线实例
使用容器元素（例如
"tooltip" 类。当用户将鼠标悬停在此 工具提示文本位于 class="tooltiptext" 的嵌入式元素（如 ）中。
tooltip 类使用 position:relative，用于放置工具提示文本（position:absolute）。注意：有关如何放置工具提示，请参见下面的例子。
tooltiptext 类保存实际的工具提示文本。默认情况下它是隐藏的，并会在鼠标悬停时可见（请参阅下文）。我们还为其添加了一些基本样式：120 像素的宽度、黑色背景、白色文本、文本居中以及 5px 的上下内边距（padding）。
CSS border-radius 属性用于向工具提示文本添加圆角。
当用户将鼠标移到 class="tooltip" 的
:hover 选择器用于显示工具提示文本。
在本例中，工具提示位于“可悬停”文本（
left:105%）。另外请注意，top:-5px 用于将其放置在其容器元素的中间。我们使用数字 5 是因为工具提示文本的上下内边距均为 5px。如果增加其内边距，还请您同时增加 top 属性的值，以确保它停留在中间。如果要将工具提示放在左侧，也同样适用。
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
结果：
请把鼠标指针移动到这段文字上方 Tooltip text 运行实例 »点击 "运行实例" 按钮查看在线实例
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
结果：
请把鼠标指针移动到这段文字上方 Tooltip text 运行实例 »点击 "运行实例" 按钮查看在线实例
如果您希望工具提示位于上方或下方，请看下面的例子。请注意，我们使用了负 60 像素的左外边距属性（margin-left）。这是为了把工具提示与可悬停文本进行居中对齐。该值是工具提示宽度的一半（120/2 = 60）。
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
结果：
请把鼠标指针移动到这段文字上方 Tooltip text 运行实例 »点击 "运行实例" 按钮查看在线实例
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
结果：
请把鼠标指针移动到这段文字上方 Tooltip text 运行实例 »点击 "运行实例" 按钮查看在线实例
如需创建在工具提示的指定侧面显示的箭头，请在工具提示后添加“空的”内容，并使用伪元素类 ::after 和 content 属性。箭头本身是使用边框创建的。这会使工具提示看起来像气泡。
本例演示如何在工具提示的底部添加箭头：
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
结果：
请把鼠标指针移动到这段文字上方 Tooltip text 运行实例 »点击 "运行实例" 按钮查看在线实例
将箭头定位在工具提示内：top: 100% 将箭头放置在工具提示的底部。left: 50% 将使箭头居中。
注意：border-width 属性指定箭头的大小。如果您更改此设置，也请将 margin-left 值更改为相同值。这将使箭头居中。
border-color 用于将内容转换为箭头。我们将上边框设置为黑色，其余设置为透明。如果所有面都是黑色，则最终将得到一个黑色的方形框。
本例演示了如何在工具提示的顶部添加箭头。请注意，这次我们设置了下边框的颜色：
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
结果：
请把鼠标指针移动到这段文字上方 Tooltip text 运行实例 »点击 "运行实例" 按钮查看在线实例
本例演示如何在工具提示的左侧添加箭头：
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
结果：
请把鼠标指针移动到这段文字上方 Tooltip text 运行实例 »点击 "运行实例" 按钮查看在线实例
本例演示如何在工具提示的右侧添加箭头：
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
结果：
请把鼠标指针移动到这段文字上方 Tooltip text 运行实例 »点击 "运行实例" 按钮查看在线实例
如果希望在即将显示的工具提示文本中淡入淡出，可以将 CSS transition 属性与 opacity 属性一同使用，并在指定的秒数（例子中是 1 秒）内从完全不可见变为 100％ 可见：
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
70.9万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习
