CSS tooltip

通过 CSS 创建工具提示（Tooltip）。

演示：工具提示

Mfano

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

Top Tekst ya tooltip
Right Tekst ya tooltip
Bottom Tekst ya tooltip
Left Tekst ya tooltip

基础的工具提示

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

Mfano

<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>

Tafakari yako

Maelezo ya mifano

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

Matokeo:

Tungua kichwa cha kifungu hiki Tekst ya tooltip

Tafakari yako

左侧工具提示

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

Matokeo:

Tungua kichwa cha kifungu hiki Tekst ya tooltip

Tafakari yako

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

Matokeo:

Tungua kichwa cha kifungu hiki Tekst ya tooltip

Tafakari yako

底部工具提示

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

Matokeo:

Tungua kichwa cha kifungu hiki Tekst ya tooltip

Tafakari yako

工具提示箭头

如需创建在工具提示的指定侧面显示的箭头，请在工具提示后添加“空的”内容，并使用伪元素类 ::after na content inatoa maelezo ya jinga. Kushoto kwenye kushoto kina uwanja wa kushoto. Hii itakuwa kumekuwa kushoto cha kushoto cha kushoto cha kushoto.

Mfano huu unatoa maelezo kuhusu matukio ya kuingia kwenye kushoto wa tooltip kwenye kushoto:

Mwana wa kushoto

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* Kwenye kushoto cha kushoto */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

Matokeo:

Tungua kichwa cha kifungu hiki Tekst ya tooltip

Tafakari yako

Maelezo ya mifano

kumekuwa kushoto cha kushoto cha kushoto cha kushoto kwenye:top: 100% kumekuwa kushoto cha kushoto cha kushoto cha kushoto.left: 50% itakuwa kumekuwa kushoto cha kushoto cha kushoto.

Kwenda maelezoborder-width inayofikiria ukubwa wa kushoto. Ikiwa unaingiza muuzi huo, ingaaingiza na: margin-left athirika na thamani hiyo. Hii itakuwa kumekuwa kushoto cha kushoto cha kushoto.

border-color inaendelea kuhakikisha kwamba matokeo yana uwanja wa kichwawa. Tumewaataa kichwawa cha juu kwa rangia ya kichwawa, na kila uwanja nyingine kwa rangia zilizotiririka. Ikiwa kila uwanja una rangia ya kichwawa, matokeo yana uwanja wa kichwawa pekee.

Mfano huu unatoa maelezo kuhusu matukio ya kuingia kwenye kushoto wa tooltip kwenye juu. Tukio hili, tumewaataa rangia ya kichwawa:

Mwana wa juu

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* Kwenye juu ya tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

Matokeo:

Tungua kichwa cha kifungu hiki Tekst ya tooltip

Tafakari yako

Mfano huu unatoa maelezo kuhusu matukio ya kuingia kwenye kushoto wa tooltip kwenye kushoto:

Mwana wa kushoto

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* Kwa kushoto wa tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

Matokeo:

Tungua kichwa cha kifungu hiki Tekst ya tooltip

Tafakari yako

Mfano huu unatoa maelezo kuhusu matukio ya kuingia kwenye kushoto wa tooltip kwenye kushoto:

Mwana wa kushoto

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%; /* Kwenye ya tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}

Matokeo:

Tungua kichwa cha kifungu hiki Tekst ya tooltip

Tafakari yako

Tooltip ya kufikia (mfano)

Ikiwa ni lazima kuingia na kuondoa tooltip text kwa mafuta, inafaa kutumia CSS transition kwa sababu ya opacity Kuandaa mafuatili ya kipindi yote kwa sababu ya kifaa cha kipindi cha kina, kwa mivuli wa kipindi (kama hii ni 1 sekunde) kutoka kina hadi kufikia 100% vizuri kwa kipindi cha kipindi cha kina:

Mfano

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

Tafakari yako