码农教程 - 一技在手,衣食无忧! tools

W3.CSS 工具提示

❮ 上一节 下一节 ❯

将鼠标悬停在下面的句子上：

伦敦(900万居民)是英格兰的首都。

伦敦900万居民是英格兰的首都。

W3.CSS 工具提示类

W3.CSS 提供以下工具提示类：

类 定义
w3-工具提示 工具提示元素
w3-文本 工具提示文本

工具提示元素和工具提示文本

当您将鼠标悬停在 HTML 元素上时，工具提示会显示文本（或其他内容）。

这个w3-工具提示类定义要悬停在其上的元素（工具提示容器）。

这个w3-文本类定义工具提示文本。

将鼠标悬停在下面的句子上：

伦敦(900万居民)是英格兰的首都。

示例

<p class="w3-tooltip">London
<span class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>
亲自试一试»

工具提示作为标签

将鼠标悬停在下面的句子上：

伦敦900万居民是英格兰的首都。

示例

<p class="w3-tooltip">London
<span class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>
亲自试一试»

图片工具提示

将鼠标悬停在这张图片上即可查看效果：

Car

汽车是一种用于运输的轮式自驱动机动车辆。该术语的大多数定义都指定汽车通常有四个轮子。（维基百科）

示例（图片前的文字）

<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>
亲自试一试»

绝对定位工具提示

如果您希望工具提示出现在绝对位置，请使用 CSS 定位工具提示文本：

伦敦 900万居民是英格兰的首都。

示例

<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-颜色课程：

示例

<span class="w3-text w3-tag w3-red">9 million inhabitants</span>
亲自试一试»

圆形工具提示

如果您想要圆形工具提示，请使用w3-圆形的课程：

示例

<span class="w3-text w3-tag w3-round-xlarge">9 million inhabitants</span>
亲自试一试»

小工具提示

如果您想要一个小工具提示，请使用w3-小号类：

示例

<span class="w3-text w3-tag w3-small">9 million inhabitants</span>
亲自试一试»

小工具提示

如果您想要一个小工具提示，请使用w3-小类：

示例

<span class="w3-text w3-tag w3-tiny">9 million inhabitants</span>
亲自试一试»

大工具提示

如果您想要一个大的工具提示，请使用w3-大的课程：

示例

<span class="w3-text w3-tag w3-xlarge">9 million inhabitants</span>
亲自试一试»

动画工具提示

如果您想淡入工具提示，请使用w3-动画不透明度类：

示例

<span class="w3-text w3-tag w3-animate-opacity">9 million inhabitants</span>
亲自试一试»

❮ 上一节 下一节 ❯