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屬性?？捎玫奈恢糜?個，分別為：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

總結

以上是生活随笔為你收集整理的预警展示样式html,纯css3 Tooltip工具提示样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。