W3.CSS 工具提示

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

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

图片工具提示

将鼠标悬停在这张图片上可以看到效果:

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

绝对定位工具提示

如果想让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>
亲自试一试 »