CSS 工具提示
通過 CSS 創建工具提示（Tooltip）。
演示：工具提示
實例
當用戶將鼠標指針移到元素上時，工具提示通常用于提供關于某內容的額外信息：
基礎的工具提示
創建一個鼠標移到元素上時顯示的工具提示：
實例
<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
<span class="tooltiptext">Tooltip text</span>
</div>
例子解釋
HTML：
使用容器元素（例如 <div>）并向其添加 "tooltip" 類。當用戶將鼠標懸停在此 <div> 上時，會顯示工具提示文本。
工具提示文本位于 class="tooltiptext" 的嵌入式元素（如 <span>）中。
CSS：
tooltip 類使用 position:relative，用于放置工具提示文本（position:absolute）。注意：有關如何放置工具提示，請參見下面的例子。
tooltiptext 類保存實際的工具提示文本。默認情況下它是隱藏的，并會在鼠標懸停時可見（請參閱下文）。我們還為其添加了一些基本樣式：120 像素的寬度、黑色背景、白色文本、文本居中以及 5px 的上下內邊距（padding）。
CSS border-radius 屬性用于向工具提示文本添加圓角。
當用戶將鼠標移到 class="tooltip" 的 <div> 上時，:hover 選擇器用于顯示工具提示文本。
定位工具提示
在本例中，工具提示位于“可懸停”文本（<div>）的右側（left:105%）。另外請注意，top:-5px 用于將其放置在其容器元素的中間。我們使用數字 5 是因為工具提示文本的上下內邊距均為 5px。如果增加其內邊距，還請您同時增加 top 屬性的值，以確保它停留在中間。如果要將工具提示放在左側，也同樣適用。
右側工具提示
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
結果：
左側工具提示
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
結果：
如果您希望工具提示位于上方或下方，請看下面的例子。請注意，我們使用了負 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 */
}
結果：
底部工具提示
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
結果：
工具提示箭頭
如需創建在工具提示的指定側面顯示的箭頭，請在工具提示后添加“空的”內容，并使用偽元素類 ::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;
}
結果：
例子解釋
將箭頭定位在工具提示內：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 .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 .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;
}
結果：
淡入的工具提示（動畫）
如果希望在即將顯示的工具提示文本中淡入淡出，可以將 CSS transition 屬性與 opacity 屬性一同使用，并在指定的秒數（例子中是 1 秒）內從完全不可見變為 100％ 可見：
實例
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
