microtip.css是一款纯css3 Tooltip工具提示样式。microtip.css不用依赖任何js文件,就可以生成时尚的Tooltip效果。它是轻量级的,压缩后的版本小于1kb。
安装
可以通过yarn或npm来安装microtip.css。
yarn add microtip npm install microtip
使用方法
在页面中引入microtip.css文件。
<link rel="stylesheet" type="text/css" href="css/microtip.css">
HTML结构
要使用microtip.css来生成Tooltip非常简单,只需要为元素添加一个data-microtip
属性即可,它里面的内容就是显示在Tooltip中的内容。。
<button data-microtip="Hey tooltip!" data-microtip-position="up" >
要设置Tooltip的位置,可以使用data-microtip-position
属性。可用的位置有8个,分别为:top
,top-left
,top-right
,bottom
,bottom-left
,bottom-right
,left
和right
。
<button data-microtip="Hey tooltip!" data-microtip-position="top-left" >
要设置Tooltip的尺寸,可以通过data-microtip-size
来设置。有三种可用的Tooltip尺寸:small
, medium
, large
。
<button data-microtip="This is a decently long text!" data-microtip-position="top-left" data-microtip-size="medium" >
配置参数
Microtip通过CSS变量,你可以通过修改下面的CSS变量的值来改变Tooltip的行为。
CSS变量 | 默认值 | 描述 |
--microtip-transition-duration | tootltip过渡动画的持续时间。 | .18s |
--microtip-transition-delay | 鼠标hover时多少秒后出现tooltip。 | 0s |
--microtip-transition-easing | 动画的easing效果。 | ease-in-out |
--microtip-font-size | tooltip上的文字的大小。 | 13px |
--microtip-font-weight | ooltip上的文字的粗细。 | normal |
--microtip-text-transform | 控制文字的大小写。 | none |
例如:下面的代码将所有的tooltip元素的tootltip过渡动画的持续时间设置为0.5秒,鼠标hover时1秒秒后出现tooltip,动画的easing效果为ease-out,字体为13像素大写粗体。
:root { --microtip-transition-duration: 0.5s; --microtip-transition-delay: 1s; --microtip-transition-easing: ease-out; --microtip-font-size: 13px; --microtip-font-weight: bold; --microtip-text-transform: uppercase; }
你也可以单独控制某个元素的样式:
.button { --microtip-transition-duration: 0.2s; --microtip-transition-delay: 0s; --microtip-transition-easing: ease-in-out; }
上面的代码仅会对.button
class的元素生效。
microtip.css纯css3 Tooltip工具提示的github地址为:https://github.com/ghosh/microtip