当你将鼠标悬停在一个HTML元素显示工具提示文本(或其它内容)。
内嵌工具提示文本
将鼠标悬停在下面的句子!
伦敦900万是英国的首都城市。
在W3-提示类定义的HTML元素悬停(工具提示容器)。
W3的文本类定义的工具提示文本:
例
<p class="w3-tooltip">London
<span
class="w3-text">9 million</span>
is the capital city of
England</p>
试一试» 内嵌工具提示标签
将鼠标悬停在下面的句子!
伦敦900万是英国的首都城市。
在W3-提示类定义的HTML元素悬停(工具提示容器)。
W3的文本类定义的工具提示文本:
例
<p class="w3-tooltip">London
<span
class="w3-text w3-tag">9 million</span>
is the capital
city of England</p>
试一试» 大型工具提示
将鼠标悬停在图片查看效果:
一辆车是用于运输的轮式,自供电的机动车。 一词的定义大多规定,汽车通常有四个轮子。(维基百科)
在W3-提示类定义的HTML元素悬停(工具提示容器)。
W3的文本类定义的工具提示文本:
示例(照片前文)
<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.jpg"
alt="Car" style="width:100%">
</div>
试一试» 示例(照片后文)
<div class="w3-tooltip">
<img src="img_car.jpg"
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文本):
例
<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色类:
圆角工具提示
如果你想有一个圆形的提示,使用W3轮类:
小工具提示
如果你想要一个小提示,使用W3小类:
微小的工具提示
如果你想有一个小小的提示,使用W3-微小类:
大型工具提示
如果你想有一个大的提示,使用W3-大班: