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

 

效果：

鼠标移动文字提示，或者重写覆盖样式都是可以的