codecamp

W3.CSS Tooltips (工具提示)

W3.CSS Tooltip 类

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

定义
w3-tooltip 工具提示元素
w2-text 工具提示文字

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

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

w3-tooltip 类定义至(工具提示容器)将鼠标悬停在元件。

w3-text 类定义的工具提示文本。

将鼠标悬停在以下句子上:

实例

<p class="w3-tooltip">伦敦

<span class="w3-text">(<em>900万居民</em>)</span>

是英国的首都。</p>


尝试一下 »
点击“尝试一下”按钮查看在线实例

工具提示作为标签

将鼠标悬停在实例句子上:

实例

<p class="w3-tooltip">伦敦

<span class="w3-text w3-tag"><b>900万居民</b></span>

是英国的首都。</p>


尝试一下 »
点击“尝试一下”按钮查看在线实例

图像工具提示

将鼠标悬停在实例中图片上可以查看效果:

实例 (图片前的文字)

<div class="w3-tooltip">
  <p class="w3-text">汽车是...</p>
  <img src="img_car.jpg" alt="Car">
</div>

尝试一下 »
点击“尝试一下”按钮查看在线实例

实例 (图片后的文字)

<div class="w3-tooltip">
  <img src="img_car.jpg" alt="Car">
  <p class="w3-text">汽车是...</p>
</div>

尝试一下 »
点击“尝试一下”按钮查看在线实例

绝对定位工具提示

如果您希望工具提示出现在绝对位置,请使用 CSS 放置工具提示文本:

实例

<p class="w3-tooltip">伦敦        
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">900万居民</span>
是英国的首都。</p>

尝试一下 »
点击“尝试一下”按钮查看在线实例

彩色工具提示

如果要使用彩色工具提示,请使用 w3-color 类:

实例

<span class="w3-text w3-tag w3-red">900万居民</span>

尝试一下 »
点击“尝试一下”按钮查看在线实例

圆形工具提示

如果您需要圆形的工具提示,请使用 w3- round 类:

实例

<span class="w3-text w3-tag w3-round-xlarge">900万居民</span>

尝试一下 »
点击“尝试一下”按钮查看在线实例

Small 工具提示

如果您需要 Small 工具提示,请使用 w3-small 类:

实例

<span class="w3-text w3-tag w3-small">900万居民</span>


尝试一下 »
点击“尝试一下”按钮查看在线实例

Tiny 工具提示

如果您需要一个 Tiny 工具提示,请使用 w3-tiny 类:

实例

<span class="w3-text w3-tag w3-tiny">900万居民</span>

尝试一下 »
点击“尝试一下”按钮查看在线实例

Large 工具提示

如果您需要 large 工具提示,请使用 w3-large 类:

实例

<span class="w3-text w3-tag w3-xlarge">900万居民</span>

尝试一下 »
点击“尝试一下”按钮查看在线实例

动画工具提示

如果要在工具提示中淡入淡出,请使用 w3-animate-opacity 类:

实例

<span class="w3-text w3-tag w3-animate-opacity">900万居民</span>

尝试一下 »
点击“尝试一下”按钮查看在线实例


W3.CSS Modal (模式)
W3.CSS Grid(网格)
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }