react-tooltip-lite

React tooltip-lite

A lightweight and responsive tooltip. Currently only this is only activated by mouseover/out but we'll be adding focus and other events as needed. 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>

Props

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

Name	Type	Description
content	node (text or html)	the contents of your hover target
tagName	string	html tag used for className
direction	string	the tip direction, defaults to up
className	string	css class added to the rendered wrapper
background	string	background color for the tooltip contents and arrow
color	string	text color for the tooltip contents
padding	string	padding amount for the tooltip contents (defaults to '10px')
styles	object	style overrides for the target wrapper
eventOn	string	full name of supported react event to show the tooltip, e.g.: 'onClick'
eventOff	string	full name of supported react event to hide the tooltip, e.g.: 'onClick'
eventOn	string	full name of supported react event to toggle the tooltip, e.g.: 'onClick'
useHover	boolean	whether to use hover to show/hide the tip

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"
  tagName="span"
  className="target"
>
    Target content for big html tip
</Tooltip>

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