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>

尝试一下 »
点击“尝试一下”按钮查看在线实例

绝对定位工具提示

如果您希望工具提示出现在绝对位置,请使用 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

公众号
微信公众号

编程狮公众号