W3.CSS 工具提示
创建于 2024-12-03 /
27
字体：
[默认]
[大]
[更大]
将鼠标悬停在下面的句子上:
London (9 million inhabitants) is the capital of England.
London 9 million inhabitants is the capital of England.
W3.CSS 工具提示类
W3.CSS 提供了以下工具提示类:
| 类 | 定义 |
|---|---|
| w3-tooltip | 工具提示元素 |
| w3-text | 工具提示文本 |
工具提示元素和工具提示文本
当您将鼠标悬停在 HTML 元素上时，工具提示会显示文本（或其他内容）。
w3-tooltip 类定义悬停的元素（工具提示容器）。
w3-text 类定义工具提示文本。
将鼠标悬停在下面的句子上:
London (9 million inhabitants) is the capital of England.
实例
<p class="w3-tooltip">London<span class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p> 亲自试一试 »
作为标签的工具提示
将鼠标悬停在下面的句子上:
London 9 million inhabitants is the capital of England.
实例
<p class="w3-tooltip">London<span class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p> 亲自试一试 »
图片工具提示
将鼠标悬停在这张图片上可以看到效果:
汽车是一种用于运输的轮式、自行驱动的机动车辆。 该术语的大多数定义都指定汽车通常有四个轮子。（维基百科）
示例（图片前的文本）
<div class="w3-tooltip"><p class="w3-text">A car is a...</p>
<img src="img_car.jpg" alt="Car">
</div> 亲自试一试 »
示例（图片后的文字）
<div class="w3-tooltip"><img src="img_car.jpg" alt="Car">
<p class="w3-text">A car is a...</p>
</div> 亲自试一试 »
绝对定位工具提示
如果想让tooltip出现在绝对位置，用CSS定位tooltip文本:
London 9 million inhabitants is the capital of England.实例
<p class="w3-tooltip">London<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9 million inhabitants</span>
is the capital of England.</p> 亲自试一试 »
彩色工具提示
如果您想要彩色工具提示，请使用 w3-color 类:
实例
<span class="w3-text w3-tag w3-red">9 million inhabitants</span> 亲自试一试 »圆形工具提示
如果您想要圆形工具提示，请使用 w3-round 类:
实例
<span class="w3-text w3-tag w3-round-xlarge">9 million inhabitants</span> 亲自试一试 »小工具提示
如果你想要一个小工具提示，使用w3-small类:
实例
<span class="w3-text w3-tag w3-small">9 million inhabitants</span> 亲自试一试 »小工具提示
如果你想要一个小工具提示，使用 w3-tiny 类:
实例
<span class="w3-text w3-tag w3-tiny">9 million inhabitants</span> 亲自试一试 »大工具提示
如果你想要一个大的工具提示，使用 w3-large 类:
实例
<span class="w3-text w3-tag w3-xlarge">9 million inhabitants</span> 亲自试一试 »动画工具提示
如果你想在工具提示中淡入淡出，使用 w3-animate-opacity 类:
实例
<span class="w3-text w3-tag w3-animate-opacity">9 million inhabitants</span> 亲自试一试 »
0 人点赞过
