https://github.com/ecmadao/rc-tipso
A light, pure js tooltip component for react
https://github.com/ecmadao/rc-tipso
react react-components react-toolbox tooltip
Last synced: 6 months ago
JSON representation
A light, pure js tooltip component for react
- Host: GitHub
- URL: https://github.com/ecmadao/rc-tipso
- Owner: ecmadao
- License: mit
- Created: 2017-04-15T06:30:28.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-07-12T04:04:04.000Z (over 3 years ago)
- Last Synced: 2025-03-17T03:43:23.473Z (10 months ago)
- Topics: react, react-components, react-toolbox, tooltip
- Language: JavaScript
- Homepage: https://ecmadao.github.io/rc-tipso
- Size: 578 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Tipso
[](https://badge.fury.io/js/rc-tipso) [](http://standardjs.com) [](https://www.npmjs.com/package/rc-tipso) [](https://raw.githubusercontent.com/ecmadao/rc-tipso/master/LICENSE)
[](https://nodei.co/npm/rc-tipso)
A tooltip component for react.
## Screenshot
## Live demo
Click here: [https://ecmadao.github.io/rc-tipso](https://ecmadao.github.io/rc-tipso)
## Install
```bash
$ npm i rc-tipso --save
```
### Build config
- Webpack 3.x config example
```javascript
// webpack config file
// loaders
const postcssLoader = {
loader: 'postcss-loader',
options: {
config: {
path: path.join(__dirname, 'postcss.config.js')
}
}
};
const cssModulesLoader = ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: true,
sourceMaps: true,
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
postcssLoader
],
});
const webpackConfig = {
module: {
rules: [
{
test: /\.css$/,
include: /rc-tipso/,
loaders: cssModulesLoader
}
]
}
};
```
- Webpack 1.x config example
```javascript
// webpack config file
// css loaders
const 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
}
]
},
postcss: () => {
return [
require('postcss-cssnext')
]
}
};
```
## Usage
```javascript
import Tipso from 'rc-tipso';
// ...
render() {
return (
This is an example
)}>
hover to show
)
}
```
## Example
Click [here](./examples/TipsoWrapper.jsx) 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
```bash
$ git clone git@github.com:ecmadao/rc-tipso.git
$ cd rc-tipso
$ npm i
$ npm run storybook
```
## License
Released under MIT License