W3.CSS 工具提示
將滑鼠懸停在下面的句子上
倫敦 (900萬居民) 是英格蘭的首都。
倫敦 900萬居民 是英格蘭的首都。
W3.CSS 工具提示類
W3.CSS 提供以下工具提示類
| 類 | 定義 |
|---|---|
| w3-tooltip | 工具提示元素 |
| w3-text | 工具提示文字 |
工具提示元素和工具提示文字
當您將滑鼠懸停在 HTML 元素上時，工具提示會顯示文字（或其他內容）。
w3-tooltip 類定義了要懸停的元素（工具提示容器）。
w3-text 類定義了工具提示文字。
將滑鼠懸停在下面的句子上
倫敦 (900萬居民) 是英格蘭的首都。
工具提示作為標籤
將滑鼠懸停在下面的句子上
倫敦 900萬居民 是英格蘭的首都。
圖片工具提示
將滑鼠懸停在此圖片上以檢視效果
汽車是一種帶輪子的、自供動力的機動車輛，用於運輸。該術語的大多數定義都規定汽車通常有四個輪子。（維基百科）
示例（圖片前的文字）
<div class="w3-tooltip">
<p class="w3-text">汽車是一種...</p>
<img src="img_car.jpg" alt="汽車">
</div>
自己試試 »
示例（圖片後的文字）
<div class="w3-tooltip">
<img src="img_car.jpg" alt="汽車">
<p class="w3-text">汽車是一種...</p>
</div>
自己試試 »
絕對定位工具提示
如果您希望工具提示出現在絕對位置，請使用 CSS 定位工具提示文字
倫敦 900萬居民 是英格蘭的首都。
示例
<p class="w3-tooltip">倫敦
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">900萬居民</span>
是英格蘭的首都。</p>
自己試試 »
彩色工具提示
如果您想要彩色工具提示，請使用 w3-color 類
圓角工具提示
如果您想要圓角工具提示，請使用 w3-round 類
小工具提示
如果您想要小工具提示，請使用 w3-small 類
微小工具提示
如果您想要微小工具提示，請使用 w3-tiny 類
大工具提示
如果您想要大工具提示，請使用 w3-large 類
動畫工具提示
如果您想讓工具提示淡入，請使用 w3-animate-opacity 類
