@wowanalyzer/react-tooltip-lite v3.1.2

React tooltip-lite

A lightweight and responsive tooltip. Feel free to Post an issue if you're looking to support more use cases.

Getting started

1. Install with NPM

$ npm install react-tooltip-lite

2. Import into your react Component

import Tooltip from 'react-tooltip-lite';

3. Wrap any element with the Tooltip component to make it a target

<Tooltip content="Go to google">
    <a href="http://google.com"> edge</a>
</Tooltip>

CodePen demo: http://codepen.io/bsidelinger912/pen/WOdPNK

Important note about contents

@wowanalyzer/react-tooltip-lite needs a single element to attach to. This element can be either:

1. React component (<Link> for example, or your custom components)
2. HTML elements like <div>

It cannot be a React.Fragment because then it won't have a target to attach to. In the same sense, it can't be a plain text or text mixed with other JSX, then it needs a wrapper element.

If you wish to put a tooltip on a custom React component, you need to make sure it spreads other properties and sets ref property on some element, like here:

class SomeComponent extends React.Component {
  render() {
    const { innerRef, ...others } = this.props;
    return (
      <div 
        ref={innerRef} 
        {...others}
      >
        Hello
      </div>
    );
  }
}

<Tooltip content="Hello">
  <SomeComponent />
</Tooltip>

innerRef needs to be specifically deconstructed from this.props and set as a ref parameter on some element, same with ...others (it contains the mouseover/toggle events for the tooltip).

Alternatively, you can wrap the component in <div> or <span> element.

Styling

By default you need to style react-tooltip-lite with CSS, this allows for psuedo elements and some cool border tricks, as well as using css/sass/less variables and such to keep your colors consistent. (Note: as of version 1.2.0 you can also pass the "useDefaultStyles" prop which will allow you to use react-tooltip-lite without a stylesheet.)

Since the tooltip's arrow is created using the css border rule (https://css-tricks.com/snippets/css/css-triangle/), you'll want to specify the border-color for the arrow to set it's color.

Here's an example stylesheet:

.react-tooltip-lite {
  background: #333;
  color: white;
}

.react-tooltip-lite-arrow {
  border-color: #333;
}

For more examples, see the CodePen demo: http://codepen.io/bsidelinger912/pen/WOdPNK.

Props

You can pass in props to define tip direction, styling, etc. Content is the only required prop.

Here's an example using more of the props:

<Tooltip
  content={(
      <div>
          <h4 className="tip-heading">An unordered list to demo some html content</h4>
          <ul className="tip-list">
              <li>One</li>
              <li>Two</li>
              <li>Three</li>
              <li>Four</li>
              <li>Five</li>
          </ul>
      </div>
  )}
  direction="right"
>
    <span>
        Target content for big html tip
    </span>
</Tooltip>

To see more usage examples, take look at the /example folder in the source.