W3.CSS Tooltips (工具提示)

2020-12-01 15:38 更新

W3.CSS Tooltip 類

W3.CSS 提供以下工具提示類：

類 定義
w3-tooltip 工具提示元素
w2-text 工具提示文字

工具提示元素和工具提示文本

將鼠標(biāo)懸停在 HTML 元素上時(shí)，工具提示會(huì)顯示文本（或其他內(nèi)容）。

w3-tooltip 類定義至（工具提示容器）將鼠標(biāo)懸停在元件。

w3-text 類定義的工具提示文本。

將鼠標(biāo)懸停在以下句子上：

實(shí)例

<p class="w3-tooltip">倫敦

<span class="w3-text">(<em>900萬(wàn)居民</em>)</span>

是英國(guó)的首都。</p>


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

工具提示作為標(biāo)簽

將鼠標(biāo)懸停在實(shí)例句子上：

實(shí)例

<p class="w3-tooltip">倫敦

<span class="w3-text w3-tag"><b>900萬(wàn)居民</b></span>

是英國(guó)的首都。</p>


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

圖像工具提示

將鼠標(biāo)懸停在實(shí)例中圖片上可以查看效果：

實(shí)例 (圖片前的文字)

<div class="w3-tooltip">
  <p class="w3-text">汽車是...</p>
  <img src="img_car.jpg" alt="Car">
</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

實(shí)例 (圖片后的文字)

<div class="w3-tooltip">
  <img src="img_car.jpg" alt="Car">
  <p class="w3-text">汽車是...</p>
</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

絕對(duì)定位工具提示

如果您希望工具提示出現(xiàn)在絕對(duì)位置，請(qǐng)使用 CSS 放置工具提示文本：

實(shí)例

<p class="w3-tooltip">倫敦        
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">900萬(wàn)居民</span>
是英國(guó)的首都。</p>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

彩色工具提示

如果要使用彩色工具提示，請(qǐng)使用 w3-color 類：

實(shí)例

<span class="w3-text w3-tag w3-red">900萬(wàn)居民</span>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

圓形工具提示

如果您需要圓形的工具提示，請(qǐng)使用 w3- round 類：

實(shí)例

<span class="w3-text w3-tag w3-round-xlarge">900萬(wàn)居民</span>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

Small 工具提示

如果您需要 Small 工具提示，請(qǐng)使用 w3-small 類：

實(shí)例

<span class="w3-text w3-tag w3-small">900萬(wàn)居民</span>


嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

Tiny 工具提示

如果您需要一個(gè) Tiny 工具提示，請(qǐng)使用 w3-tiny 類：

實(shí)例

<span class="w3-text w3-tag w3-tiny">900萬(wàn)居民</span>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

Large 工具提示

如果您需要 large 工具提示，請(qǐng)使用 w3-large 類：

實(shí)例

<span class="w3-text w3-tag w3-xlarge">900萬(wàn)居民</span>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

動(dòng)畫工具提示

如果要在工具提示中淡入淡出，請(qǐng)使用 w3-animate-opacity 類：

實(shí)例

<span class="w3-text w3-tag w3-animate-opacity">900萬(wàn)居民</span>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)