W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

W3.CSS 提示工具



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


内联提示文本

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

London 9 million is the capital city of England.

w3-tooltip 类定义悬停提示工具。

w3-text 类定义提示文本。

Example

<p class="w3-tooltip">London
<span class="w3-text">9 million</span>
is the capital city of England</p>
尝试一下 »

内联提示标签

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

London 9 million is the capital city of England.

w3-tooltip 类定义悬停提示工具。

w3-text 类定义提示文本。

Example

<p class="w3-tooltip">London
<span class="w3-text w3-tag">9 million</span>
is the capital city of England</p>
尝试一下 »

带有图片的提示工具

将鼠标悬停在此图片上以查看效果

Car

A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars typically have four wheels.(Wikipedia)

w3-tooltip 类定义悬停提示工具。

w3-text 类定义提示文本。

Example (文本在图片之前)

<div class="w3-tooltip">

<p class="w3-text">A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars typically have four wheels.(Wikipedia)</p>

<img src="img_car.png" alt="Car" style="width:100%">

</div>
尝试一下 »

Example (文本在图片之后)

<div class="w3-tooltip">

<img src="img_car.png" alt="Car" style="width:100%">

<p class="w3-text">A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars typically have four wheels.(Wikipedia)</p>

</div>
尝试一下 »

绝对位置的提示工具

如果您希望提示工具出现在绝对位置,请放置工具提示文本(w3-text):

Example

<p class="w3-tooltip">London is the capital city of England.
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9million</span></p>
尝试一下 »

带颜色的提示工具

如果你想创建一个带有颜色的提示工具,请使用 w3-color 类:

Example

<span class="w3-text w3-tag w3-red">9 million</span>
尝试一下 »

圆角提示工具

如果你想创建一个带有圆角的提示工具,请使用 w3-round 类:

Example

<span class="w3-text w3-tag w3-round">9 million</span>
尝试一下 »

小号提示工具

如果你想要创建一个小号提示工具,请使用 w3-small 类:

Example

<span class="w3-text w3-tag w3-small">9 million</span>
尝试一下 »

微小提示工具

如果你想要创建一个微小提示工具,请使用 w3-tiny 类:

Example

<span class="w3-text w3-tag w3-tiny">9 million</span>
尝试一下 »

大号提示工具

如果你想要创建一个大号提示工具,请使用 w3-large 类:

Example

<span class="w3-text w3-tag w3-xlarge">9 million</span>
尝试一下 »