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 类
