CSS Tooltips美化提示效果库Hint.css

CSS Tooltips美化提示效果库Hint.css

Hint.css是一个使用SASS构建只使用CSS和HTML的提示库。该库使用数据属性、内
0
  • 详情内容
  • 留言点评

Hint.css是一个使用SASS构建只使用CSS和HTML的提示库。该库使用数据属性、内容属性、伪元素以及CSS3转换。提示框简洁漂亮,有箭头且可放置在父元素的任何一边。

功能特点:

只需要引入一个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 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 –基本功能

欢迎点评!也可以是问题反馈和建议

支持Ctrl+Enter提交
暂无留言,快抢沙发!
0

真心很赞,必须打赏!嗯,以资鼓励~

点此打赏

99%看过的人还会看