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

hint.css使用说明的更多相关文章

  1. PostgreSQL SQL HINT的使用说明

    本文来自:http://www.023dns.com/Database_mssql/5974.html PostgreSQL优化器是基于成本的 (CBO) , (当然, 如果开启了GEQO的话, 在关 ...

  2. Web开发中20个很有用的CSS库

    来源: 微信公众号文章 在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性.每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发.像CSS库,框架,应用这 ...

  3. Web 开发中 20 个很有用的 CSS 库

    转自:http://www.oschina.net/translate/css-libraries-for-developers 在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供 ...

  4. 前端总结·基础篇·CSS(三)补充

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...

  5. 总结css的使用技巧

    1. 纯 CSS 的 tooltips 现在的要求是使用纯css在页面上显示一个title,或者图片的描述文字(在鼠标移入图片之后): content,attr() content一般与::befor ...

  6. 前端总结·基础篇·CSS

    前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;}  /* IE8+ */body {margin:0;}  ...

  7. flex.css声明式布局

    flex.css能完美的运行在移动端的各种浏览器,甚至能运行在ie10+的各种PC端浏览器中 flex和data-flex flex.css 有两个版本,一个是flex.css一个是data-flex ...

  8. Sultana后记:纯css也能写col,select,datepicker,carousel...

    未完待续 背景 如今css3越来越发达,focus-within等属性也已经开始在Chrome得到支持.如果有出色的css功底,一点点ps技能,你也能用css3配合原生html标签写出优秀的框架.通过 ...

  9. 八个解决你80%需求的CSS动画库

    八个解决你80%需求的CSS动画库 点击打开视频讲解 在学习和工作的过程中,我们总免不了要写各种各样的css动画,给某个部分添加动画效果,如果觉得自己写的动画效果单一乏味,不妨试试这8个CSS动画库, ...

随机推荐

  1. 网络协议之NAT穿透

    NAT IPv4地址只有32位,最多只能提供大致42.9亿个唯一IP地址,当设备越来越多时,IP地址变得越来越稀缺,不能为每个设备都分配一个IP地址.于是,作为NAT规范就出现了.NAT(Networ ...

  2. sql server中分布式查询随笔(链接服务器(sp_addlinkedserver)和远程登录映射(sp_addlinkedsrvlogin)使用小总结)

    由于业务逻辑的多样性,经常得在sql server中查询不同数据库中数据,这就产生了分布式查询的需求 现我将开发中遇到的几种查询总结如下: 1.access版本 --建立连接服务器 EXEC sp_a ...

  3. 编译原理之正则表达式转NFA

    本文转载自http://chriszz.sinaapp.com/?p=257 输入一个正则表达式,输出一个NFA. 我的做法:输入一个字符串表示正则,输出则是把输出到一个.dot文件中并将dot文件编 ...

  4. linux 101 hacks 5PS1

    PS1——默认提示符 看完这一章,我心里若干个卧槽.. 如下所示, 可以通过修改 Linux 下的默认提示符,使其更加实用.在下面的例子中,默认的 PS1的值是“ \s-\v\$”,显示出了 shel ...

  5. 02:实现Singleton模式

    Java实现单例模式有很多种实现方法,其中我们应根据需要选择线程安全的与非线程安全的两种方式,根据对象实现的方式又分为饱汉与饿汉方式. 这里使用java中的volatile关键字与synchroniz ...

  6. SpringSecurity3基础篇

    Spring Security 是一种基于Spring AOP 和Servlet过滤器的安全框架,它提供了全面的安全性解决方案,同时在Web请求级和方法调用级处理身份确认和授权.在Spring Fra ...

  7. Xiaoguang Tu's Home Page

    Xiaoguang Tu (涂晓光): CV: Ph.D. Candidate of School of Communication and Information Engineering, Univ ...

  8. thinkphp3.2链接数据库常用的配置选项

    thinkphp3.2常用配置选项,app/Common/Conf/config.php 或者 app/Home/Conf/config.php 1 2 3 4 5 6 7 8 'SHOW_PAGE_ ...

  9. java 代码中设置 临时 环境变量

    System.setProperty("hadoop.home.dir", "D:\\software\\software_install\\dev_install\\h ...

  10. AtCoder Grand Contest 019 F-yes or no

    AtCoder Grand Contest 019 F-yes or no 解题思路: 考虑一个贪心策略,假设当前还有 \(x\) 道 \(\text{yes}\) 和 \(y\) 道 \(\text ...