CSS 提示工具(Tooltip)
本文我們為大家介紹如何使用 HTML 與 CSS 來創建提示工具。
提示工具在滑鼠移動到指定元素後觸發，先看以下四個實例：
|
頭部顯示
提示框文本
|
右邊顯示
提示框文本
|
底部顯示
提示框文本
|
左邊顯示
提示框文本
|
基礎提示框(Tooltip)
提示框在滑鼠移動到指定元素上顯示：
HTML 代碼：
<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) 使用容器元素 (like <div>) 並添加
"tooltip" 類。在滑鼠移動到 <div> 上時顯示提示資訊。
提示文本放在內聯元素上(如 <span>) 並使用class="tooltiptext"。
CSS)tooltip 類使用 position:relative, 提示文本需要設置定位值 position:absolute。
注意: 接下來的實例會顯示更多的定位效果。
tooltiptext 類用於實際的提示文本。模式是隱藏的，在滑鼠移動到元素顯示 。設置了一些寬度、背景色、字體色等樣式。
CSS3 border-radius 屬性用於為提示框添加圓角。
:hover 選擇器用於在滑鼠移動到到指定元素 <div> 上時顯示的提示。
定位提示工具
以下實例中，提示工具顯示在指定元素的右側(left:105%) 。
注意 top:-5px 同於定位在容器元素的中間。使用數字 5 因為提示文本的頂部和底部的內邊距（padding）是 5px。
如果你修改 padding 的值，top 值也要對應修改，這樣才可以確保它是居中對齊的。
在提示框顯示在左邊的情況也是這個原理。
顯示在右側：
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
顯示在左側：
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
如果你想要提示工具顯示在頭部和底部。我們需要使用 margin-left 屬性，並設置為 -60px。
這個數字計算來源是使用寬度的一半來居中對齊，即： width/2 (120/2 = 60)。
顯示在頭部：
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
顯示在底部：
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px;
}
添加箭頭
我們可以用CSS 偽元素 ::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;
}
淡入效果
我們可以使用 CSS3 transition 屬性及 opacity 屬性來實現提示工具的淡入效果:
左側提示框/右側箭頭：
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
更多實例
漂亮的 CSS 提示框
