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

// 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

// 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

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 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 [email protected]:ecmadao/rc-tipso.git
$ cd rc-tipso
$ npm i
$ npm run storybook

License

Released under MIT License