CSS టూల్‌టిప్

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

演示：工具提示

ఇన్స్టాన్స్

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

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

基础的工具提示

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

ఇన్స్టాన్స్

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

స్వయంగా ప్రయత్నించండి

ఉదాహరణ వివరణ

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

结果：

请把鼠标指针移动到这段文字上方 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; /* వెడల్పుని అర్ధమును వాడండి (120/2 = 60), టూల్టిప్‌ను మధ్యలో కేంద్రీకరించడానికి */
}

结果：

请把鼠标指针移动到这段文字上方 Tooltip text

స్వయంగా ప్రయత్నించండి

బోటమ్ టూల్టిప్

.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* వెడల్పుని అర్ధమును వాడండి (120/2 = 60), టూల్టిప్‌ను మధ్యలో కేంద్రీకరించడానికి */
}

结果：

请把鼠标指针移动到这段文字上方 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 {
  ఆపక్యురిటీ: 0;
  ట్రాన్సిషన్: ఆపక్యురిటీ 1s;
}
.tooltip:hover .tooltiptext {
  ఆపక్యురిటీ: 1;
}

స్వయంగా ప్రయత్నించండి