JSPM

Package Exports

react-tooltip-lite

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-tooltip-lite) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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';

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

<tr>
  <td>tagName</td>
  <td>string</td>
  <td>html tag used for className</td>
</tr>

<tr>
  <td>direction</td>
  <td>string</td>
  <td>the tip direction, defaults to up</td>
</tr>

<tr>
  <td>className</td>
  <td>string</td>
  <td>css class added to the rendered wrapper</td>
</tr>

<tr>
  <td>background</td>
  <td>string</td>
  <td>background color for the tooltip contents and arrow</td>
</tr>

<tr>
  <td>color</td>
  <td>string</td>
  <td>text color for the tooltip contents</td>
</tr>

<tr>
  <td>padding</td>
  <td>string</td>
  <td>padding amount for the tooltip contents (defaults to '10px')</td>
</tr>

Name	Type	Description
content	node (text or html)	the contents of your hover target

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.

react-tooltip-lite