CSS 教程
本文我們?yōu)榇蠹医榻B如何使用 HTML 與 CSS 來創(chuàng)建提示工具。
提示工具在鼠標(biāo)移動(dòng)到指定元素后觸發(fā)，先看以下四個(gè)實(shí)例：
|
頭部顯示
提示框文本
|
右邊顯示
提示框文本
|
底部顯示
提示框文本
|
左邊顯示
提示框文本
|
提示框在鼠標(biāo)移動(dòng)到指定元素上顯示：
HTML) 使用容器元素 (like <div>) 并添加 "tooltip" 類。在鼠標(biāo)移動(dòng)到 <div> 上時(shí)顯示提示信息。
提示文本放在內(nèi)聯(lián)元素上(如 <span>) 并使用class="tooltiptext"。
CSS)tooltip 類使用 position:relative, 提示文本需要設(shè)置定位值 position:absolute。 注意: 接下來的實(shí)例會(huì)顯示更多的定位效果。
tooltiptext 類用于實(shí)際的提示文本。模式是隱藏的，在鼠標(biāo)移動(dòng)到元素顯示 。設(shè)置了一些寬度、背景色、字體色等樣式。
CSS3 border-radius 屬性用于為提示框添加圓角。
:hover 選擇器用于在鼠標(biāo)移動(dòng)到到指定元素 <div> 上時(shí)顯示的提示。
以下實(shí)例中，提示工具顯示在指定元素的右側(cè)(left:105%) 。
注意 top:-5px 同于定位在容器元素的中間。使用數(shù)字 5 因?yàn)樘崾疚谋镜捻敳亢偷撞康膬?nèi)邊距（padding）是 5px。
如果你修改 padding 的值，top 值也要對(duì)應(yīng)修改，這樣才可以確保它是居中對(duì)齊的。
在提示框顯示在左邊的情況也是這個(gè)原理。
如果你想要提示工具顯示在頭部和底部。我們需要使用 margin-left 屬性，并設(shè)置為 -60px。 這個(gè)數(shù)字計(jì)算來源是使用寬度的一半來居中對(duì)齊，即： width/2 (120/2 = 60)。
我們可以用CSS 偽元素 ::after 及 content 屬性為提示工具創(chuàng)建一個(gè)小箭頭標(biāo)志，箭頭是由邊框組成的，但組合起來后提示工具像個(gè)語(yǔ)音信息框。
以下實(shí)例演示了如何為顯示在頂部的提示工具添加底部箭頭：
在提示工具內(nèi)定位箭頭: top: 100% , 箭頭將顯示在提示工具的底部。left: 50% 用于居中對(duì)齊箭頭。
注意：border-width 屬性指定了箭頭的大小。如果你修改它，也要修改 margin-left 值。這樣箭頭在能居中顯示。
border-color 用于將內(nèi)容轉(zhuǎn)換為箭頭。設(shè)置頂部邊框?yàn)楹谏渌峭该鞯?。如果設(shè)置了其他的也是黑色則會(huì)顯示為一個(gè)黑色的四邊形。
以下實(shí)例演示了如何在提示工具的頭部添加箭頭，注意設(shè)置邊框顏色：
以下兩個(gè)實(shí)例是左右兩邊的箭頭實(shí)例：
我們可以使用 CSS3 transition 屬性及 opacity 屬性來實(shí)現(xiàn)提示工具的淡入效果: