redux-tooltip

A tooltip React component for Redux.

Installation

npm install --save redux-tooltip

Examples

Please check out examples directory.

Getting Started

redux-tooltip provides a Redux reducer and two React components; Tooltip and Origin. The reducer handles actions dispatched from UI components and changes Redux's state tree. Since both components are already connected to Redux store (this also means they can call store.dispatch()), the Tooltip component receives changes of props and updates itself.

The recommended setup is that a single (shared) Tooltip component and multiple Origin components. If you hover on the origin element, the tooltip will be shown.

1. Put a shared Tooltip component to Container component

import { Tooltip } from 'redux-tooltip';

class App extends React.Component {
  render() {
    return (
      <div>
        <Page />
        <Tooltip>
          Hello Tooltip!
        </Tooltip>
      </div>
    );
  }
}

2. Wrap your content with an Origin component in Container or Presentatinal component

import { Origin } from 'redux-tooltip';

class Page extends React.Component {
  render() {
    return (
      <p>
        Please hover <Origin>here</Origin>.
      </p>
    );
  }
}

3. Combine redux-tooltip reducer with yours

import { reducer as tooltip } from 'redux-tooltip';

// ...

export default combineReducers(
  { your, reducers, ..., tooltip }
);

That's it!

API

<Tooltip />

A tooltip component. Please wrap a content which should be shown in a tooltip.

• name (string): A name of tooltip. This is used by <Origin /> component.
• place (string|string[]): A default direction of tooltip. This value can be overwritten by <Origin />'s place prop.
• within (DOM Element): A DOM element which is used to restrict the position where this tooltip is placed within.
• onHover (Function): A callback function to be called on mouseover at tooltip.
• onLeave (Function): A callback function to be called on mouseout at tooltip.

<Origin />

An origin component. Please wrap an element which triggers the action to show a tooltip. In most cases, you may use this component without any options. For advanced usage, you can override the default handlers; onMouseEnter and onMouseLeave.

• name (string|string[]): A name(s) to specify which tooltip(s) should be used.
• content (string):
• place (string|string[]):
• delay (boolean|number):
• onMouseEnter (Function): An event handler of mouseenter.
• onMouseLeave (Function): An event handler of mouseleave.

reducer

A Redux reducer must be combined with yours.

middleware

Please apply this middleware if you want to use 'delay' feature.

actions

WIP

Development

Setup

npm install
npm run build

Start dev server for example

npm start

Open http://localhost:8080/webpack-dev-server/ for auto-reloading. If you want to debug with React Dev Tools, http://localhost:8080/ will be preferred.

Run test

This executes both unit and integration tests:

npm test

Unit test

npm run test:unit

Integration test

We're currently use Google Chrome for testing environment. Following command will launch Chrome browser and run test suite.

npm run test:feature

If you prefer 'single-run', which means that the browser is closed after testing, try following command:

npm run test:feature:ci

TODO

• Options to change offsets
• Supports custom themes
• Introduce ESLint
• API documentation using ESDoc

Changelog

See the Releases page on GitHub.

License

MIT

Author

Yuki Kodama / @kuy