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. ROS + Caffe 机器人操作系统框架和深度学习框架笔记 (機器人控制與人工智能)

    ROS + Caffe,这里以环境中物体识别为示例,机器人怎么知道环境里面有什么呢? [0.0567392 - n03376595 folding chair][0.0566773 - n040999 ...

  2. 以太坊go-ethereum常见问题汇总

    (1)什么是 Ethereum? 以太坊是一个分散的智能合同平台,由Ether的加密货币提供支持. (2) 听说过以太坊,但什么是Geth,Mist,Ethminer,Mix? Geth: 以太坊节点 ...

  3. ETL工具kettle基本使用

    1.下载kettle:https://sourceforge.net/projects/pentaho/files/Data%20Integration/7.0/pdi-ce-7.0.0.0-25.z ...

  4. 一些你可能需要的okhttp实现

    https://blog.csdn.net/qq_17766199/article/details/53186874 今天分享一些我在项目中使用到的okhttp实现,由简至难.(以下内容均在okhtt ...

  5. mysql 拾遗提高(函数、事务、索引)

    目录 1.tips 2.事务(transaction) 3.索引(index) 4.数据库的导出和备份 5.函数 6.防SQL注入 7.使用Explain分析SQL语句 8.视图(view) 1.ti ...

  6. R语言编程艺术(2)R中的数据结构

    本文对应<R语言编程艺术>第2章:向量:第3章:矩阵和数组:第4章:列表:第5章:数据框:第6章:因子和表 ======================================== ...

  7. WebLogic和Tomcat的区别

    J2ee开发主要是浏览器和服务器进行交互的一种结构.逻辑都是在后台进行处理,然后再把结果传输回给浏览器.可以看出服务器在这种架构是非常重要的. 这几天接触到两种Java的web服务器,做项目用的Tom ...

  8. 【原创】MySQL复制slave服务器死锁案例

    MySQL复制刚刚触发了一个bug,该bug的触发条件是slave上Xtrabackup备份的时候执行flushs tables with read lock和show slave status有可能 ...

  9. requests爬取百度音乐

    使用requests爬取百度音乐,我想把当前热门歌手的音乐信息爬下来. 首先进行url分析,可以看到: 歌手网页: 薛之谦网页: 可以看到,似乎这些路劲的获取一切都很顺利,然后可以写代码: # -*- ...

  10. BZOJ 1528 [POI2005]sam-Toy Cars(优先队列)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1528 [题目大意] 地上最多可以放k个玩具,现在给出需求顺序, 问最少需要去架子上拿几 ...