hint.css使用说明用途快速实现tooltips提示样式相关资源官方网站GitHubCDN功能特色:只需要引入一个CSS文件,没有JavaScript文件只有1.5KB min版 and zip版 (指的是SCSS,CSS10KB)便于使用,无需配置支持aria-label无 ...
hint.css使用说明
用途
快速实现tooltips提示样式
相关资源
官方网站GitHubCDN
功能特色:
- 只需要引入一个CSS文件,没有JavaScript
- 文件只有1.5KB min版 and zip版 (指的是SCSS,CSS10KB)
- 便于使用,无需配置
- 支持aria-label无障碍属性
- 支持所有主流浏览器
缺点:
收费,商业用途需要获得相关许可证
使用方法:
一、在HEAD标签内引入:
<link rel="stylesheet" href="hint.css"></link>
或
<link rel="stylesheet" href="hint.min.css"></link>
二、例子
Hello Sir, <span 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 data-hint="提示信息">错误</span>
警告 hint--warning
<span data-hint="提示信息">警告</span>
提示 hint--info
<span data-hint="提示信息">提示</span>
成功 hint--success
<span data-hint="提示信息">成功</span>
五、尺寸-修饰符
小尺寸 hint--small
<span data-hint="提示信息">成功</span>
中等尺寸 hint--medium
<span data-hint="提示信息">成功</span>
大尺寸 hint--large
<span data-hint="提示信息">成功</span>
六、其他-修饰符
一直显示不隐藏 hint--always
<span data-hint="提示信息">一直显示</span>
提示框改成圆角 hint--rounded
<span data-hint="提示信息">圆角显示</span>
去掉过渡动画效果 hint--no-animate
<span data-hint="提示信息">无动画</span>
过渡增加弹性效果 hint--bounce
<span data-hint="提示信息">动画增加弹性过渡</span>
浏览器兼容
- Chrome – 基本功能 + transition 效果
- Firefox – 基本功能 + transition 效果
- Opera – 基本功能
- Safari – basic
- IE 10+ – 基本功能 + transition 效果
- IE 8 & 9 –基本功能
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:hint.css使用说明
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。