CSS提示

創建CSS提示。

演示：提示示例

工具提示是經常被用來當用戶將在一個元素的鼠標指針移動到指定有關一些額外的信息：

基本的工具提示

創建當用戶在一個元素上移動鼠標時出現的提示：

例子解釋：

HTML）使用容器元素（如<div>並添加"tooltip"類吧。 當用戶鼠標移到該<div> ，它會顯示提示文字。

提示文本放置一個內聯元素中（如<span>與class="tooltiptext"

CSS）的tooltip類使用position:relative ，這是需要的提示文本（位置position:absolute 。） 注：請參見下面的例子就如何將工具提示的位置。

該tooltiptext類持有實際的工具提示文本。 它默認是隱藏的，並將於懸停可見（見下文）。 我們還增加了一些基本的樣式吧：120像素寬，黑色的底色，白色文本顏色，居中的文本，並為5px頂部和底部填充。

CSS3的border-radius屬性用於圓角添加到工具提示文本。

該:hover選擇器用於當用戶移動鼠標在顯示工具提示文本<div>與class="tooltip" 。

定位工具提示

在這個例子中，工具提示被放置在正確的(left:105%)的的"hoverable"文本(<div>) 還要注意的是top:-5px用於將其放置在其容器元件的中間。 我們用5號，因為提示文本有5像素的頂部和底部填充。 如果增加其填充，也增加了價值top屬性，以確保它保持在中間（如果這是你想要的東西）。 如果你想放置在左邊的提示同樣適用。

如果你想在提示出現在頂部或底部，請參見下面的例子。 注意，我們使用的margin-left財產零下60像素的值。 這是到中心上方的工具提示/低於hoverable文本。 它被設置為工具提示的寬度（120/2 = 60）的一半。

提示箭頭

要創建應該出現在提示的一個具體方面，提示後加“空”的內容，與偽元素類的箭頭::after與一起content屬性。 箭頭本身使用的邊界創建。 這將使工具提示看起來像一個講話泡沫。

這個例子演示了如何將箭頭添加到工具提示底部：

例子解釋：

箭頭工具提示內側的位置： top: 100%將會把箭頭提示的底部。 left: 50%將中心的箭頭。

注意： border-width屬性指定的箭頭的大小。 如果你改變這一點，也改變了margin-left值相同。 這將保持居中的箭頭。

所述border-color用於將內容轉換成一個箭頭。 我們設置上邊框為黑色，其餘為透明。 如果各方都是黑人，你最終會得到一個黑色的方盒子。

這個例子演示了如何將箭頭添加到工具提示的頂部。 請注意，我們設置在底邊框的顏色這個時候：

這個例子演示了如何將箭頭添加到工具提示左側：

這個例子演示了如何將箭頭添加到工具提示的權利：

淡入工具提示（動畫）

如果你想在提示文本褪色，當它即將是可見的，你可以使用CSS3 transition的共同財產opacity性，以及為100％可見完全看不見去，在一些特定秒（1秒在我們的例子）：

注意：您將了解更多有關過渡和動畫在我們的教程後面。