rmc-tooltip

rmc-tooltip

React Tooltip
!NPM versionnpm-imagenpm-url !build statustravis-imagetravis-url !Test coveragecoveralls-imagecoveralls-url !gemnasium depsgemnasium-imagegemnasium-url !node versionnode-imagenode-url !npm downloaddownload-imagedownload-url

Screenshot

Install

Usage

var Tooltip = require('rmc-tooltip');
var React = require('react');
var ReactDOM = require('react-dom');

// By default, the tooltip has no style.
// Consider importing the stylesheet it comes with:
// 'rmc-tooltip/assets/bootstrap_white.css'

ReactDOM.render(<Tooltip placement="left" overlay={<span>tooltip</span>}><a href='#'>hover</a></Tooltip>, container);

Examples

npm start and then go to http://localhost:8007/examples
Online examples: http://react-component.github.io/tooltip/examples/

API

Props

<thead>
<tr>
    <th style="width: 100px;">name</th>
    <th style="width: 50px;">type</th>
    <th style="width: 50px;">default</th>
    <th>description</th>
</tr>
</thead>
<tbody>
    <tr>
      <td>overlayClassName</td>
      <td>string</td>
      <td></td>
      <td>additional className added to popup overlay</td>
    </tr>
    <tr>
      <td>overlayStyle</td>
      <td>Object</td>
      <td></td>
      <td>additional style of overlay node</td>
    </tr>
    <tr>
      <td>prefixCls</td>
      <td>String</td>
      <td>rmc-tooltip</td>
      <td>prefix class name</td>
    </tr>
    <tr>
      <td>transitionName</td>
      <td>String</td>
      <td></td>
      <td>same as https://github.com/react-component/css-transition-group</td>
    </tr>
    <tr>
      <td>onVisibleChange</td>
      <td>Function</td>
      <td></td>
      <td>call when visible is changed</td>
    </tr>
    <tr>
      <td>afterVisibleChange</td>
      <td>Function</td>
      <td></td>
      <td>call after visible is changed</td>
    </tr>
    <tr>
      <td>visible</td>
      <td>boolean</td>
      <td></td>
      <td>whether tooltip is visible</td>
    </tr>
    <tr>
      <td>defaultVisible</td>
      <td>boolean</td>
      <td></td>
      <td>whether tooltip is visible initially</td>
    </tr>
    <tr>
      <td>placement</td>
      <td>String</td>
      <td></td>
      <td>one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight']</td>
    </tr>
    <tr>
      <td>align</td>
      <td>Object: alignConfig of [dom-align](https://github.com/yiminghe/dom-align)</td>
      <td></td>
      <td>value will be merged into placement's config</td>
    </tr>
    <tr>
      <td>onPopupAlign</td>
      <td>function(popupDomNode, align)</td>
      <td></td>
      <td>callback when popup node is aligned</td>
    </tr>
    <tr>
      <td>overlay</td>
      <td>React.Element | () => React.Element</td>
      <td></td>
      <td>popup content</td>
    </tr>
    <tr>
      <td>arrowContent</td>
      <td>React.Node</td>
      <td>null</td>
      <td>arrow content</td>
    </tr>
    <tr>
      <td>getTooltipContainer</td>
      <td>function</td>
      <td></td>
      <td>Function returning html node which will act as tooltip container. By default the tooltip attaches to the body. If you want to change the container, simply return a new element.</td>
    </tr>
    <tr>
      <td>destroyTooltipOnHide</td>
      <td>boolean</td>
      <td>false</td>
      <td>whether destroy tooltip when tooltip is hidden</td>
    </tr>
</tbody>

Note

Tooltip requires child node accepts onClick event.

Development

npm install
npm start

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

License

rmc-tooltip is released under the MIT license.