雷林鵬分享：CSS 提示工具(Tooltip)

　　本文我們為大家介紹如何使用 HTML 與 CSS 來建立提示工具。

　　提示工具在滑鼠移動到指定元素後觸發，先看以下四個執行個體：

　　頭部顯示右邊顯示底部顯示左邊顯示

　　基礎提示框(Tooltip)

　　提示框在滑鼠移動到指定元素上顯示：

　　HTML 代碼：

　　

滑鼠移動到這 提示文本

　　執行個體解析

　　HTML) 使用容器元素 (like

) 并添加 "tooltip" 類。在滑鼠移動到

上時顯示提示資訊。

　　提示文本放在内聯元素上(如 ) 并使用。

　　CSS)tooltip 類使用 position:relative, 提示文本需要設定定位值 position:absolute。 注意: 接下來的執行個體會顯示更多的定位效果。

　　tooltiptext 類用于實際的提示文本。模式是隐藏的，在滑鼠移動到元素顯示 。設定了一些寬度、背景色、字型色等樣式。

　　CSS3 border-radius 屬性用于為提示框添加圓角。

　　:hover 選擇器用于在滑鼠移動到到指定元素

上時顯示的提示。

　　定位提示工具

　　以下執行個體中，提示工具顯示在指定元素的右側(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; /* 使用一半寬度 (120/2 = 60) 來居中提示工具 */ }

　　顯示在底部：

　　.tooltip .tooltiptext { width: 120px; top: 100%; left: 50%; margin-left: -60px; /* 使用一半寬度 (120/2 = 60) 來居中提示工具 */ }

　　添加箭頭

　　我們可以用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; }