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 类
