你的位置:首页 > 网页设计

[网页设计]hint.css使用说明

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 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 –基本功能