W3.CSS Tooltips (工具提示)

2020-12-01 15:38 更新

W3.CSS Tooltip 類

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

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

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

將鼠標懸停在 HTML 元素上時，工具提示會顯示文本（或其他內容）。

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

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

將鼠標懸停在以下句子上：

實例

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

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

是英國的首都。</p>


嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

工具提示作為標簽

將鼠標懸停在實例句子上：

實例

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

<span class="w3-text w3-tag"><b>900萬居民</b></span>

是英國的首都。</p>


嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

圖像工具提示

將鼠標懸停在實例中圖片上可以查看效果：

實例 (圖片前的文字)

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

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

實例 (圖片后的文字)

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

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

絕對定位工具提示

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

實例

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

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

彩色工具提示

如果要使用彩色工具提示，請使用 w3-color 類：

實例

<span class="w3-text w3-tag w3-red">900萬居民</span>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

圓形工具提示

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

實例

<span class="w3-text w3-tag w3-round-xlarge">900萬居民</span>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

Small 工具提示

如果您需要 Small 工具提示，請使用 w3-small 類：

實例

<span class="w3-text w3-tag w3-small">900萬居民</span>


嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

Tiny 工具提示

如果您需要一個 Tiny 工具提示，請使用 w3-tiny 類：

實例

<span class="w3-text w3-tag w3-tiny">900萬居民</span>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

Large 工具提示

如果您需要 large 工具提示，請使用 w3-large 類：

實例

<span class="w3-text w3-tag w3-xlarge">900萬居民</span>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

動畫工具提示

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

實例

<span class="w3-text w3-tag w3-animate-opacity">900萬居民</span>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例


以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號