React Tipso
A tooltip component for react.
Screenshot
Live demo
Click here: https://ecmadao.github.io/rc-tipso
Install
$ npm i rc-tipso --save
Build config
- Webpack 3.x config example
// webpack config file // loadersconst postcssLoader = loader: 'postcss-loader' options: config: path: path ;const cssModulesLoader = ExtractTextPlugin; const webpackConfig = module: rules: test: /\.css$/ include: /rc-tipso/ loaders: cssModulesLoader ;
- Webpack 1.x config example
// webpack config file // css loadersconst cssLoaders = 'style-loader' 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 'postcss-loader'; const webpackConfig = module: loaders: test: /\.css$/ include: /rc-tipso/ loaders: cssLoaders { return };
Usage
; // ... { return <Tipso theme="dark" position="bottom" trigger="hover" tipsoContent= <div style= width: '95px' textAlign: 'center' >This is an example</div> > <div>hover to show</div> </Tipso> }
Example
Click here to see tipso usage examples.
Api
name | type | default | description |
---|---|---|---|
tipsoContent | react element or node | null |
The DOM content you wanna show in tooltip. |
theme | string | light |
Tooltip theme, support light or dark |
trigger | string | hover |
The way to active tooltip, you can use hover , click , focus and so on. |
wrapperStyle | object | {} |
A style object that change the UI of tooltip container. |
wrapperClass | string | '' |
Custom className to change the UI of tooltip container. |
className | string | '' |
Custom className to change the UI of tooltip |
tipsoStyle | object | {} |
A style object that change the UI of tooltip. |
position | string | top |
Tooltip position. support top , bottom |
show | bool | false |
Use outside prosp to deside whether show tooltip or not. |
Dev
$ git clone git@github.com:ecmadao/rc-tipso.git$ cd rc-tipso$ npm i$ npm run storybook
License
Released under MIT License