စတုံးဆိုင်ရာ အကြောင်းအရာတင်

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

亲自试一试

အက်ပ်စ်အီး အပေါ် သို့မဟုတ် အောက် အပေါ် ရှိ သော အခြေအနေ ကို မြင်ပါ။ အရေးပါ အချက်ပါ အားဖြင့် ကန့်သတ် သည့် အရွယ် အတွက် အရွယ်အရ အော်ဂန် အရွယ် တစ်ဝက် (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 */
}

结果：

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

亲自试一试

ချိုးတန်း အက်ပ်စ်အီး

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

结果：

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

亲自试一试

အက်ပ်စ်အီး အော်ဂန်

ကိုယ်စားပြုပ်သတ်သော အော်ဂန်နှင့် အစားအလျှောက် ပြုလုပ် သတ်မှတ် သည့် အခြေအနေ ကို ဖော်ထုတ် ရန် ပြုလုပ် ပါ။ အက်ပ်စ်အီး ကို ပြုလုပ် ပါ။ ::after နှင့် content အရေးယူ အမှုထမ်း အရေးယူအမှုထမ်း。

ဤအမှတ်အသားတွင် အကြောင်းအရာကို အကြောင်းအရာအရွယ်အစား တစ်ခု ထပ်ထည့်ရန် ပြောကြားသည်:

သို့ဖြစ့် အရွယ်အစား

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* စက်လုံးအရင်း အောက်တွင် */
  left: 50%;
  margin-left: -5ပေါက်;
  border-width: 5ပေါက်;
  border-style: အတန်းမျက်နှာ;
  border-color: မြောက်ရွှေ့ ကြားစင် ကြားစင် ကြားစင်;
}

结果：

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

亲自试一试

အမှတ်အသား

သို့ဖြစ့် အရွယ်အစား သူကို စက်လုံးအရင်း အိုင်အို အတွင်းသို့ ခွဲခြားထားရန်。top: 100% သို့ဖြစ့် အရွယ်အစား အောက်တွင် သူကို စက်လုံးအရင်း နှင့် အတူ ထပ်ထည့်ရန်。left: 50% သတ်မှတ် အောက်ဘေးအရောင်ကို သတ်မှတ်ရန်။ ဤအကူအညီဖြင့် အရွယ်အစား သူကို အကိုင်းအရွယ်အစား သို့ ပြောင်းလဲပေးသည်。

အကြောင်းအရာborder-width အရေးယူ အမှုထမ်း အရွယ်အစားကို သတ်မှတ်သည်。 margin-left သတ်မှတ် အတူတူ အတ္ထုံးများကို သတ်မှတ်ရန်။ ဤအကူအညီဖြင့် အရွယ်အစား သူကို အကိုင်းအရွယ်အစား သို့ ပြောင်းလဲပေးသည်。

border-color အကြောင်းအရာကို အရွယ်အစား သုံးစွဲရန်。

ဤအမှတ်အသားတွင် အကြောင်းအရာကို အကြောင်းအရာအရွယ်အစား တစ်ခု ထပ်ထည့်ရန် ပြောကြားသည်။ ကျွန်ုပ်သည် အောက်ဘေးအရောင်ကို သတ်မှတ်သည်:

သို့ဖြစ့် အရွယ်အစား

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* စက်လုံးအရင်း အောက်တွင် */
  left: 50%;
  margin-left: -5ပေါက်;
  border-width: 5ပေါက်;
  border-style: အတန်းမျက်နှာ;
  border-color: ကြားစင် ကြားစင် မြောက်ရွှေ့ ကြားစင်;
}

结果：

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

亲自试一试

ဤအမှတ်အသားတွင် အကြောင်းအရာကို အကြောင်းအရာအရွယ်အစား တစ်ခု ထပ်ထည့်ရန် ပြောကြားသည်:

သို့ဖြစ့် အရွယ်အစား

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* စက်လုံးအရင်း အား အားထုတ် */
  margin-top: -5ပေါက်;
  border-width: 5ပေါက်;
  border-style: အတန်းမျက်နှာ;
  border-color: ကြားစင် မြောက်ရွှေ့ ကြားစင် ကြားစင်;
}

结果：

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

亲自试一试

ဤအမှတ်အသားတွင် အကြောင်းအရာကို အကြောင်းအရာအရွယ်အစား တစ်ခု ထပ်ထည့်ရန် ပြောကြားသည်:

သို့ဖြစ့် အရွယ်အစား

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%; /* စက်လုံးအရင်း နှင့် တူ */
  margin-top: -5ပေါက်;
  border-width: 5ပေါက်;
  border-style: အတန်းမျက်နှာ;
  border-color: ကြားစင် ကြားစင် ကြားစင် မြောက်ရွှေ့;
}

结果：

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

亲自试一试

淡入的工具提示（动画）

如果希望在即将显示的工具提示文本中淡入淡出，可以将 CSS transition 属性与 opacity 属性一同使用，并在指定的秒数（例子中是 1 秒）内从完全不可见变为 100％ 可见：

实例

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

亲自试一试