原始网址:http://www.w3schools.com/css/css_tooltip.asp
翻译:
CSS 提示框
使用 CSS 创建提示框。
演示:提示框示例
当用户移动鼠标指针至元素之上的时候,提示框经常用以对相关内容指定额外信息:
<!DOCTYPE html>
<html>
<head>
<style>
.w3-row::after {
clear: both;
content: "";
display: table;
}
.w3-center {
text-align: center !important;
}
.w3-quarter {
float: left;
width: 25%;
}
.tooltip {
border-bottom: 1px dotted #ccc;
color: #006080;
display: inline-block;
position: relative;
}
.tooltip .tooltiptext {
background-color: #555;
border-radius: 6px;
color: #fff;
opacity: 0;
padding: 5px 0;
position: absolute;
text-align: center;
transition: opacity 1s ease 0s;
visibility: hidden;
width: 120px;
z-index: 1;
}
.tooltip:hover .tooltiptext {
opacity: 1;
visibility: visible;
}
.tooltip-right {
left: 125%;
top: -5px;
}
.tooltip-right::after {
border-color: transparent #555 transparent transparent;
border-style: solid;
border-width: 5px;
content: "";
margin-top: -5px;
position: absolute;
right: 100%;
top: 50%;
}
.tooltip-bottom {
left: 50%;
margin-left: -60px;
top: 135%;
}
.tooltip-bottom::after {
border-color: transparent transparent #555;
border-style: solid;
border-width: 5px;
bottom: 100%;
content: "";
left: 50%;
margin-left: -5px;
position: absolute;
}
.tooltip-top {
bottom: 125%;
left: 50%;
margin-left: -60px;
}
.tooltip-top::after {
border-color: #555 transparent transparent;
border-style: solid;
border-width: 5px;
content: "";
left: 50%;
margin-left: -5px;
position: absolute;
top: 100%;
}
.tooltip-left {
bottom: auto;
right: 128%;
top: -5px;
}
.tooltip-left::after {
border-color: transparent transparent transparent #555;
border-style: solid;
border-width: 5px;
content: "";
left: 100%;
margin-top: -5px;
position: absolute;
top: 50%;
}
</style>
</head>
<body>
<div class="w3-row w3-center" style="margin-top: 35px; margin-bottom: 35px;">
<div class="w3-quarter">
<div class="tooltip">
Top <span class="tooltiptext tooltip-top">Tooltip text</span>
</div>
</div>
<div class="w3-quarter">
<div class="tooltip">
Right <span class="tooltiptext tooltip-right">Tooltip text</span>
</div>
</div>
<div class="w3-quarter">
<div class="tooltip">
Bottom <span class="tooltiptext tooltip-bottom">Tooltip text</span>
</div>
</div>
<div class="w3-quarter">
<div class="tooltip">
Left <span class="tooltiptext tooltip-left">Tooltip text</span>
</div>
</div>
</div>
</body>
</html>
基本提示框(Basic Tooltip)
创建提示框以使当用户移动鼠标至元素之上的时候显示它:
<!DOCTYPE html>
<html>
<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;
border-radius: 6px;
padding: 5px 0;
position: absolute; /* Position the tooltip */
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align: center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">
Hover over me <span class="tooltiptext">Tooltip text</span>
</div>
<p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in an desirable way.</p>
</body>
</html>
示例解释:
HTML) 使用容器元素(如 <div>
)并且对它添加 “tooltip” 类。当用户的鼠标至于 <div>
之上的时候,它将显示提示文本。提示文本置于以 class=”tooltiptext” 修饰的行内元素(如 <span>
)。
CSS) tooltip 类使用 position:relative,用以定位提示文本(position:absolute)。注意:查看以下示例是如何定位提示框的。
tooltiptext 类维持实际的提示文本。在默认情况下,它是隐藏的,基于 hover 显示。我们也对它添加了某些基本样式:120px 宽、黑色背景色、白色文本色、文本居中、5px 上下内边距。
CSS3 的 border-radius 属性用以添加提示文本的圆角样式。
当用户移动鼠标至以 class=”tooltip” 修饰的 <div>
之上时,:hover 选择器用以显示提示文本。
定位提示框(Positioning Tooltip)
在这个示例中,提示框置于 “hoverable” 文本的右侧(left:105%)。也要注意,是 top:-5px 将它放在了容器元素的中间位置。我们使用数字 5 是因为提示文本有 5px 的上下内边距。如果你增加它的内边距,也要增加 top 属性的值以确保它居中(如果你想这么干)。如果你想让提示框置于左侧,如法炮制。
/* 右侧提示框 */
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
<!-- 右侧提示框 -->
<!DOCTYPE html>
<html>
<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;
border-radius: 6px;
padding: 5px 0;
position: absolute; /* Position the tooltip */
z-index: 1;
top: -5px;
left: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align: center;">
<h2>Right Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">
Hover over me <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
/* 左侧提示框 */
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
<!-- 左侧提示框 -->
<!DOCTYPE html>
<html>
<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;
border-radius: 6px;
padding: 5px 0;
position: absolute; /* Position the tooltip */
z-index: 1;
top: -5px;
right: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align: center;">
<h2>Left Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">
Hover over me <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
如果你想让提示框出现在上方或下方,查看下列示例。注意,我们设置 margin-left 属性的值为 -60px 。这会使提示框居中于悬停式文本(hoverable text)上/下。它被设置为提示框宽度的一半(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 */
}
<!-- 顶部提示框 -->
<!DOCTYPE html>
<html>
<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;
border-radius: 6px;
padding: 5px 0;
position: absolute; /* Position the tooltip */
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align: center;">
<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">
Hover over me <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
/* 底部提示框 */
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
<!-- 底部提示框 -->
<!DOCTYPE html>
<html>
<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;
border-radius: 6px;
padding: 5px 0;
position: absolute; /* Position the tooltip */
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align: center;">
<h2>Bottom Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">
Hover over me <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
提示框箭头(Tooltip Arrows)
伪元素类 ::after 结合 content 属性以创建呈现于提示框指定一侧的箭头,在提示框之后添加 “empty” 内容。箭头自身由边框创建。这使得提示框看起来像是会话泡(speech bubble)。
这个示例演示如何在提示框的底部添加箭头:
/* 底部箭头 */
.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;
}
<!DOCTYPE html>
<html>
<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;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
}
.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;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align: center;">
<h2>Top Tooltip w/ Bottom Arrow</h2>
<div class="tooltip">
Hover over me <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
示例解释
在提示框内定位箭头:top: 100% 使箭头置于提示框的底部。left: 50% 使箭头居中。
注意:border-width 属性指定箭头大小。如果你对它进行变更,也要对 margin-left 值做相同的变更。这会使箭头保持居中。
border-color 用以将内容转变为箭头。我们设置顶部边框为黑色,剩余部分为透明。如果各个边框(上、下、左、右)均为黑色,你会得到一个黑方盒(a black square box)。
这个示例演示如何将箭头添加到提示框顶部。注意:我们这次设置了底边框的颜色:
/* 顶部箭头 */
.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;
}
<!DOCTYPE html>
<html>
<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;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
}
.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:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align: center;">
<h2>Bottom Tooltip w/ Top Arrow</h2>
<div class="tooltip">
Hover over me <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
这个示例演示如何将箭头添加到提示框左侧:
/* 左侧箭头 */
.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;
}
<!DOCTYPE html>
<html>
<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;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 110%;
}
.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:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align: center;">
<h2>Right Tooltip w/ Left Arrow</h2>
<div class="tooltip">
Hover over me <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
这个示例演示如何将箭头添加到提示框右侧:
/* 右侧箭头 */
.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;
}
<!DOCTYPE html>
<html>
<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;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
right: 110%;
}
.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;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align: center;">
<h2>Left Tooltip w/ Right Arrow</h2>
<div class="tooltip">
Hover over me <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
淡入提示框(Fade In Tooltips)
如果你想在提示框即将显现的时候有淡入提示框文本的效果,你可以使用 CSS3 的 transition 属性结合 opacity 属性的方式,将它在特定的秒数内从完全不可见变为 100% 可见(本例设置时间为 1 秒):
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
<!DOCTYPE html>
<html>
<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;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<body style="text-align: center;">
<h2>Fade In Tooltip on Hover</h2>
<p>When you move the mouse over the text below, the tooltip text
will fade in and take 1 second to go from completely invisible to
visible.</p>
<div class="tooltip">
Hover over me <span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
注意:你将在之后的章节中学习到更多有关过渡、动画效果的内容。