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> 上时,它将显示工具提示文本。
工具提示文本放置在具有 class="tooltiptext"
的内联元素(如 <span>)内。
CSS: tooltip
类使用 position:relative
,这对于定位工具提示文本(position:absolute
)是必需的。注意:有关如何定位工具提示,请参阅下面的示例。
tooltiptext
类包含实际的工具提示文本。它默认隐藏,并在悬停时可见(如下所示)。我们还为其添加了一些基本样式:120px 宽度、黑色背景色、白色文本颜色、居中文本以及 5px 的顶部和底部内边距。
border-radius
CSS 属性用于为工具提示文本添加圆角。
:hover
选择器用于在用户将鼠标悬停在具有 class="tooltip"
的 <div> 上时显示工具提示文本。
定位工具提示
在此示例中,工具提示放置在“可悬停”文本(<div>)的右侧(left:105%
)。另外请注意,top:-5px
用于将其放置在其容器元素的中间。我们使用数字 **5**,因为工具提示文本具有 5px 的顶部和底部内边距。如果您增加其内边距,也请增加 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;
}
自己动手试一试 »