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>
<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>
<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>
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">900万居民</span>
是英国的首都。</p>
尝试一下 »
点击“尝试一下”按钮查看在线实例
彩色工具提示
如果要使用彩色工具提示，请使用 w3-color 类：
圆形工具提示
如果您需要圆形的工具提示，请使用 w3- round 类：
Small 工具提示
如果您需要 Small 工具提示，请使用 w3-small 类：
Tiny 工具提示
如果您需要一个 Tiny 工具提示，请使用 w3-tiny 类：
Large 工具提示
如果您需要 large 工具提示，请使用 w3-large 类：
动画工具提示
如果要在工具提示中淡入淡出，请使用 w3-animate-opacity 类：
以上内容是否对您有帮助：
更多建议：