做网站的技术性说明,做网站建设销售工资,网易手游排行榜,虚拟主机装wordpressmicrotip.css是一款纯css3 Tooltip工具提示样式。microtip.css不用依赖任何js文件#xff0c;就可以生成时尚的Tooltip效果。它是轻量级的#xff0c;压缩后的版本小于1kb。安装可以通过yarn或npm来安装microtip.css。yarn add microtipnpm install microtip使用方法在页面中…microtip.css是一款纯css3 Tooltip工具提示样式。microtip.css不用依赖任何js文件就可以生成时尚的Tooltip效果。它是轻量级的压缩后的版本小于1kb。安装可以通过yarn或npm来安装microtip.css。yarn add microtipnpm install microtip使用方法在页面中引入microtip.css文件。HTML结构要使用microtip.css来生成Tooltip非常简单只需要为元素添加一个data-microtip属性即可它里面的内容就是显示在Tooltip中的内容。。要设置Tooltip的位置可以使用data-microtip-position属性。可用的位置有8个分别为toptop-lefttop-rightbottombottom-leftbottom-rightleft和right。要设置Tooltip的尺寸可以通过data-microtip-size来设置。有三种可用的Tooltip尺寸small medium large。data-microtip-positiontop-leftdata-microtip-sizemedium 配置参数Microtip通过CSS变量你可以通过修改下面的CSS变量的值来改变Tooltip的行为。CSS变量默认值描述--microtip-transition-durationtootltip过渡动画的持续时间。.18s--microtip-transition-delay鼠标hover时多少秒后出现tooltip。0s--microtip-transition-easing动画的easing效果。ease-in-out--microtip-font-sizetooltip上的文字的大小。13px--microtip-font-weightooltip上的文字的粗细。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
