hint.css使用說明

GitHub：http://liu12fei08fei.github.io/html/1hint.html

hint.css使用說明

用途

快速實現tooltips提示樣式

相關資源

官方網站GitHubCDN

功能特色：

1. 只需要引入一個CSS文件，沒有JavaScript
2. 文件只有1.5KB min版 and zip版 （指的是SCSS，CSS10KB）
3. 便於使用，無需配置
4. 支持aria-label無障礙屬性
5. 支持所有主流瀏覽器

缺點：

收費，商業用途需要獲得相關許可證

使用方法：

一、在HEAD標簽內引入：

<link rel="stylesheet" href="hint.css"></link>

或

<link rel="stylesheet" href="hint.min.css"></link>

二、例子

Hello Sir, <span class="hint--bottom" aria-label="Thank you!">hover me.</span>

三、使用方法

class綁定八種方法：（表示顯示位置）

hint--top hint--right hint--bottom hint--left hint--top-left hint--top-right hint--bottom-left hint-bottom-right

 

提示內容或提示文本：（以屬性的形式寫入）

兩種方法：data-hint="提示信息" 或 aria-label="提示信息"

四、顏色-修飾符

錯誤 hint--error

<span class="hint--top hint--error" data-hint="提示信息">錯誤</span>

 

警告 hint--warning

<span class="hint--top hint--warning" data-hint="提示信息">警告</span>

 

提示 hint--info

<span class="hint--top hint--info" data-hint="提示信息">提示</span>

 

成功 hint--success

<span class="hint--top hint--success" data-hint="提示信息">成功</span>

五、尺寸-修飾符

小尺寸 hint--small

<span class="hint--top hint--small" data-hint="提示信息">成功</span>

 

中等尺寸 hint--medium

<span class="hint--top hint--medium" data-hint="提示信息">成功</span>

 

大尺寸 hint--large

<span class="hint--top hint--large" data-hint="提示信息">成功</span>

六、其他-修飾符

一直顯示不隱藏 hint--always

<span class="hint--top hint--always" data-hint="提示信息">一直顯示</span>

 

提示框改成圓角 hint--rounded

<span class="hint--top hint--rounded" data-hint="提示信息">圓角顯示</span>

 

去掉過渡動畫效果 hint--no-animate

<span class="hint--top hint--no-animate" data-hint="提示信息">無動畫</span>

 

過渡增加彈性效果 hint--bounce

<span class="hint--top hint--bounce" data-hint="提示信息">動畫增加彈性過渡</span>

瀏覽器兼容

• Chrome – 基本功能 + transition 效果
• Firefox – 基本功能 + transition 效果
• Opera – 基本功能
• Safari – basic
• IE 10+ – 基本功能 + transition 效果
• IE 8 & 9 –基本功能