react-microtip
react-microtip copied to clipboard
davidtran
Animated, minimal and beautiful React tooltip component. Only 3kb minified and gzipped.
React Micro Tip
Animated, minimal and beautiful React tooltip component. Only 3kb minified and gzipped.
Installation
npm
npm install react-microtip --save
*yarn
yarn add react-microtip --save
Usage
import Microtip from 'react-microtip';
<Microtip
content={"This tip is nice!"}
duration={180}
delay={0}
easing="ease-in-out"
position="top">
<div>My Button</div>
</Microtip>
Properties
| Property | Is Required? | Description | Default value |
|---|---|---|---|
| content | true | Content of tooltip | |
| duration | false | The duration of tooltip transition | 180 |
| delay | false | The delay time before showing the tooltip | 0 |
| easing | false | The easing applied while transitioning the tooltip | ease-in-out |
| position | false | The position of tooltip. There are 8 available positions: top, top-left, top-right, bottom, bottom-left, bottom-right, left, right | top |
Credits
- David Tran JSLancer.com
This project is inspired by Microtip library
davidtran