预警展示样式html,纯css3 Tooltip工具提示样式

microtip.css是一款纯css3 Tooltip工具提示样式。microtip.css不用依赖任何js文件，就可以生成时尚的Tooltip效果。它是轻量级的，压缩后的版本小于1kb。

安装

可以通过yarn或npm来安装microtip.css。

yarn add microtip

npm install microtip

使用方法

在页面中引入microtip.css文件。

HTML结构

要使用microtip.css来生成Tooltip非常简单，只需要为元素添加一个data-microtip属性即可，它里面的内容就是显示在Tooltip中的内容。。

要设置Tooltip的位置，可以使用data-microtip-position属性。可用的位置有8个，分别为：top，top-left，top-right，bottom，bottom-left，bottom-right，left和right。

要设置Tooltip的尺寸，可以通过data-microtip-size来设置。有三种可用的Tooltip尺寸：small， medium， large。

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;

}

上面的代码仅会对.buttonclass的元素生效。

microtip.css纯css3 Tooltip工具提示的github地址为：https://github.com/ghosh/microtip