ຫົວຂໍ້ຫົວຂໍ້ວຽກການຟອນສາຍ

通过 CSS 创建工具提示(Tooltip)。

演示:工具提示

Example

当用户将鼠标指针移到元素上时,工具提示通常用于提供关于某内容的额外信息:

Top Tooltip text
Right Tooltip text
Bottom Tooltip text
Left Tooltip text

基础的工具提示

创建一个鼠标移到元素上时显示的工具提示:

Example

<style>
/* Tooltip 容器 */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* 如果需要在可悬停文本下面显示点线 */
{}
/* Tooltip 文本 */
.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">Hover over me</div>
  <span class="tooltiptext">Tooltip text</span>

Try It Yourself

例子解释

HTML:

使用容器元素(例如

)并向其添加 "tooltip" 类。当用户将鼠标悬停在此
上时,会显示工具提示文本。

工具提示文本位于 class="tooltiptext" 的嵌入式元素(如 )中。

CSS:

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%; 
{}

Result:

Please move the mouse pointer over this text Tooltip text

Try It Yourself

左侧工具提示

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

Result:

Please move the mouse pointer over this text Tooltip text

Try It Yourself

如果您希望工具提示位于上方或下方,请看下面的例子。请注意,我们使用了负 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 */
{}

Result:

Please move the mouse pointer over this text Tooltip text

Try It Yourself

ອາກາດປະກອບອອກອາກາດຕາເວັນຕົກ

.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
{}

Result:

Please move the mouse pointer over this text Tooltip text

Try It Yourself

ອາກາດປະກອບອອກອາກາດ

ສຳລັບທີ່ຈະສ້າງອອກອາກາດປະກອບອອກອາກາດທີ່ສະແດງຕົວອອກຫຼັງບາງຂັ້ນຕອນຂອງອາກາດປະກອບອອກອາກາດດັ່ງກ່າວນັ້ນຫຼັງຈາກບາງຂັ້ນຕອນທີ່ມີຄວາມວ່າ“ບໍ່ມີສິ່ງບັງຄັບ”ແລະໃຊ້ປະເພດປະກອບອອກອາກາດດັ່ງກ່າວ ::aftercontent 属性。箭头本身是使用边框创建的。这会使工具提示看起来像气泡。

本例演示如何在工具提示的底部添加箭头:

底部箭头

.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;
{}

Result:

Please move the mouse pointer over this text Tooltip text

Try It Yourself

例子解释

将箭头定位在工具提示内: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;
{}

Result:

Please move the mouse pointer over this text Tooltip text

Try It Yourself

本例演示如何在工具提示的左侧添加箭头:

左侧箭头

.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;
{}

Result:

Please move the mouse pointer over this text Tooltip text

Try It Yourself

本例演示如何在工具提示的右侧添加箭头:

右侧箭头

.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;
{}

Result:

Please move the mouse pointer over this text Tooltip text

Try It Yourself

Fade-in Tooltip (Animation)

If you want to fade in and out the tooltip text that is about to be displayed, you can use CSS transition Properties with opacity Properties are used together and change from completely invisible to 100% visible within the specified number of seconds (in the example, 1 second):

Example

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

Try It Yourself