hint.css使用说明
GitHub:http://liu12fei08fei.github.io/html/1hint.html
hint.css使用说明
用途
快速实现tooltips提示样式
相关资源
功能特色:
- 只需要引入一个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 –基本功能
hint.css使用说明的更多相关文章
- PostgreSQL SQL HINT的使用说明
本文来自:http://www.023dns.com/Database_mssql/5974.html PostgreSQL优化器是基于成本的 (CBO) , (当然, 如果开启了GEQO的话, 在关 ...
- Web开发中20个很有用的CSS库
来源: 微信公众号文章 在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性.每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发.像CSS库,框架,应用这 ...
- Web 开发中 20 个很有用的 CSS 库
转自:http://www.oschina.net/translate/css-libraries-for-developers 在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供 ...
- 前端总结·基础篇·CSS(三)补充
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...
- 总结css的使用技巧
1. 纯 CSS 的 tooltips 现在的要求是使用纯css在页面上显示一个title,或者图片的描述文字(在鼠标移入图片之后): content,attr() content一般与::befor ...
- 前端总结·基础篇·CSS
前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;} /* IE8+ */body {margin:0;} ...
- flex.css声明式布局
flex.css能完美的运行在移动端的各种浏览器,甚至能运行在ie10+的各种PC端浏览器中 flex和data-flex flex.css 有两个版本,一个是flex.css一个是data-flex ...
- Sultana后记:纯css也能写col,select,datepicker,carousel...
未完待续 背景 如今css3越来越发达,focus-within等属性也已经开始在Chrome得到支持.如果有出色的css功底,一点点ps技能,你也能用css3配合原生html标签写出优秀的框架.通过 ...
- 八个解决你80%需求的CSS动画库
八个解决你80%需求的CSS动画库 点击打开视频讲解 在学习和工作的过程中,我们总免不了要写各种各样的css动画,给某个部分添加动画效果,如果觉得自己写的动画效果单一乏味,不妨试试这8个CSS动画库, ...
随机推荐
- 关于主键的设计、primary key
主键:用于唯一标识一个表中一行数据. 外键:用于建立两个表之间的关系,A表中有一列是B表中的主键,那么A表中这列的数据就受到B表主键的约束. 那么关于主键应该如何设计呢,这里我说下优缺点: 1.用自动 ...
- 关于在调用JAVAFX相关包时遇到Access restriction: The type 'Application' is not API (restriction on required library)的解决方法
点击工具栏的Project->Properties->Java Build Path->Libraries-> 双击第一项 点击Add添加允许javafx 然后就不会报错了
- 最近公共祖先(LCA)模板
以下转自:https://www.cnblogs.com/JVxie/p/4854719.html 首先是最近公共祖先的概念(什么是最近公共祖先?): 在一棵没有环的树上,每个节点肯定有其父亲节点和祖 ...
- 如何使用 JMeter 调用你的 Restful Web Service?进行简单的压力测试和自动化测试
表述性状态传输(REST)作为对基于 SOAP 和 Web 服务描述语言(WSDL)的 Web 服务的简单替代,在 Web 开发上得到了广泛的接受.能够充分证明这点的是主流 Web 2.0 服务提供商 ...
- Oracle学习笔记:ORA-22992 cannot use LOB locators selected from remote tables
通过DB_LINK访问远程表的时候出现 ORA-22992: cannot use LOB locators selected from remote tables 错误. 原因:因为表中含有clob ...
- HTML5练习1
制作简历 主要代码: <!doctype html> <html> <head> <meta charset="utf-8"> &l ...
- java8 - 多线程时间安全问题
import java.text.SimpleDateFormat; import java.time.LocalDate; import java.time.format.DateTimeForma ...
- 【58沈剑架构系列】为什么说要搞定微服务架构,先搞定RPC框架?
第一章聊了[“为什么要进行服务化,服务化究竟解决什么问题”] 第二章聊了[“微服务的服务粒度选型”] 今天开始聊一些微服务的实践,第一块,RPC框架的原理及实践,为什么说要搞定微服务架构,先搞定RPC ...
- DNS 设置
用上 ip 靓号1.1.1.1,Cloudflare 花了多少钱? ipv4: 1.1.1.1 和 1.0.0.1 是目前最快的 DNS. 通过ipv6***之二--使用IPv6 DNS服务器
- Netty堆外内存泄露排查与总结
导读 Netty 是一个异步事件驱动的网络通信层框架,用于快速开发高可用高性能的服务端网络框架与客户端程序,它极大地简化了 TCP 和 UDP 套接字服务器等网络编程. Netty 底层基于 JDK ...