纯css3 Tooltip工具提示样式

当前位置:主页 > CSS3库 > CSS3动画 > 纯css3 Tooltip工具提示样式
纯css3 Tooltip工具提示样式
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:05-23
    阅读:
简要教程

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个,分别为:toptop-lefttop-rightbottombottom-leftbottom-rightleftright

<button data-microtip="Hey tooltip!" data-microtip-position="top-left" >             
                

要设置Tooltip的尺寸,可以通过data-microtip-size来设置。有三种可用的Tooltip尺寸:smallmediumlarge

<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;
}                  
                

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

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