microtip Tooltip工具提示樣式

最近開發項目，想增長滑動提示文字，相似img alt和i的title，可是效果都不是很理想，固然jq也有，可是用起來比較繁瑣，使用不是特別方便

因而在github上看到了一個不錯的庫：

https://github.com/sevck/microtip

國外寫的一個純css3的tooltips

 

安裝使用很簡單：

Installation

via npm

npm install microtip

via yarn

yarn add microtip

via CDN

https://unpkg.com/microtip/microtip.css

direct download

curl -o microtip https://github.com/ghosh/microtip/blob/master/microtip.css

Setup

in PostCSS

@import 'microtip';

in Webpack

import microtip from 'microtip/microtip.css'

in SCSS

@import 'microtip/microtip';

Usage

   import：

<link rel="stylesheet" type="text/css" href="css/microtip.css">

<button aria-label="Hey tooltip!" data-microtip-position="up" role="tooltip">

也支持調整顯示的位置，滑動出現的時間、字體大小等等

Customization

Microtip uses css variables, which allows you to customize the behavior of the tooltip as per your needs.

Variable	Description	Default Value
--microtip-transition-duration	Specifies the duration of the tootltip transition	.18s
--microtip-transition-delay	The delay on hover before showing the tooltip	0s
--microtip-transition-easing	The easing applied while transitioning the tooltip	ease-in-out
--microtip-font-size	Sets the font size of the text in tooltip	13px
--microtip-font-weight	The font weight of the text in tooltip	normal
--microtip-text-transform	Controls the casing of the text	none

 

效果：

鼠標移動文字提示，或者重寫覆蓋樣式都是能夠的