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;
}
自己動手試一試 »
