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. 关于主键的设计、primary key

    主键:用于唯一标识一个表中一行数据. 外键:用于建立两个表之间的关系,A表中有一列是B表中的主键,那么A表中这列的数据就受到B表主键的约束. 那么关于主键应该如何设计呢,这里我说下优缺点: 1.用自动 ...

  2. 关于在调用JAVAFX相关包时遇到Access restriction: The type 'Application' is not API (restriction on required library)的解决方法

    点击工具栏的Project->Properties->Java Build Path->Libraries-> 双击第一项 点击Add添加允许javafx 然后就不会报错了

  3. 最近公共祖先(LCA)模板

    以下转自:https://www.cnblogs.com/JVxie/p/4854719.html 首先是最近公共祖先的概念(什么是最近公共祖先?): 在一棵没有环的树上,每个节点肯定有其父亲节点和祖 ...

  4. 如何使用 JMeter 调用你的 Restful Web Service?进行简单的压力测试和自动化测试

    表述性状态传输(REST)作为对基于 SOAP 和 Web 服务描述语言(WSDL)的 Web 服务的简单替代,在 Web 开发上得到了广泛的接受.能够充分证明这点的是主流 Web 2.0 服务提供商 ...

  5. Oracle学习笔记:ORA-22992 cannot use LOB locators selected from remote tables

    通过DB_LINK访问远程表的时候出现 ORA-22992: cannot use LOB locators selected from remote tables 错误. 原因:因为表中含有clob ...

  6. HTML5练习1

    制作简历 主要代码: <!doctype html> <html> <head> <meta charset="utf-8"> &l ...

  7. java8 - 多线程时间安全问题

    import java.text.SimpleDateFormat; import java.time.LocalDate; import java.time.format.DateTimeForma ...

  8. 【58沈剑架构系列】为什么说要搞定微服务架构,先搞定RPC框架?

    第一章聊了[“为什么要进行服务化,服务化究竟解决什么问题”] 第二章聊了[“微服务的服务粒度选型”] 今天开始聊一些微服务的实践,第一块,RPC框架的原理及实践,为什么说要搞定微服务架构,先搞定RPC ...

  9. DNS 设置

    用上 ip 靓号1.1.1.1,Cloudflare 花了多少钱? ipv4: 1.1.1.1 和 1.0.0.1 是目前最快的 DNS. 通过ipv6***之二--使用IPv6 DNS服务器

  10. Netty堆外内存泄露排查与总结

    导读 Netty 是一个异步事件驱动的网络通信层框架,用于快速开发高可用高性能的服务端网络框架与客户端程序,它极大地简化了 TCP 和 UDP 套接字服务器等网络编程. Netty 底层基于 JDK ...