# rc-tipso

> A tooltip component for react

Latest version **1.0.2** (published 2018-07-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install rc-tipso
pnpm add rc-tipso
yarn add rc-tipso
bun add rc-tipso
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2018-07-05 |
| First published | 2017-04-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ecmadao |
| Maintainers | ecmadao |
| Keywords | react, react-tooltip, tooltip, tipso |

## Links

- npm: https://www.npmjs.com/package/rc-tipso
- npm.io page: https://npm.io/package/rc-tipso

## Dependencies (3)

- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [object-assign](https://npm.io/package/object-assign.md) ^4.1.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2018-07-05
- 1.0.1 — 2018-06-09
- 1.0.0 — 2018-02-05
- 0.0.6 — 2017-06-30
- 0.0.4 — 2017-06-25
- 0.0.3 — 2017-04-15
- 0.0.2 — 2017-04-15

## README

# React Tipso

[![npm version](https://badge.fury.io/js/rc-tipso.svg)](https://badge.fury.io/js/rc-tipso)  [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com) [![rc-tipso](http://img.shields.io/npm/dm/rc-tipso.svg)](https://www.npmjs.com/package/rc-tipso) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/ecmadao/rc-tipso/master/LICENSE)

[![NPM](https://nodei.co/npm/rc-tipso.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/rc-tipso)

A tooltip component for react.

## Screenshot

![rc-tipso](./screenshots/screenshot.png)

## 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 (
    <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](./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

---
_Source: https://npm.io/package/rc-tipso · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._