JSPM

react-tooltip

1.1.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1385341
  • Score
    100M100P100Q231966F
  • License MIT

react tooltip component

Package Exports

  • react-tooltip

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) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-tooltip

Version js-standard-style npm download Circle CI

Installation

npm install react-tooltip

Usage

Using NPM

1 . Require react-tooltip after installation

var ReactTooltip = require("react-tooltip")

2 . Add data-tip = "your placeholder" to your element

<p data-tip="hello world">Tooltip</p>

3 . Including react-tooltip component

<ReactTooltip />

Standalone

You can import node_modules/react-tooltip/standalone/react-tooltip.min.js into your page, please make sure that you have already imported react and react-dom into your page.

Options

Notes:

  • The tooltip is using type: dark place: top effect: float as default attribute, you don't have to add these options if you don't want to change default
  • The option you set on <ReactTooltip /> component will be implemented on every tooltip in a same page: <ReactTooltip effect="solid" />
  • The option you set on specific elecment, for example: <a data-type="warning"></a> will only make effect on this specific tooltip

Check example: React-tooltip Test

Global  |	Specific	|	Type	|	Values  |       Description

:-----------|:-------------|:----------|:----------|:------------------ place | data-place | String | top, right, bottom, left | tooltip's placement type | data-type | String | success, warning, error, info, light | tooltip's color theme effect | data-effect | String | float, solid | either float or pinned event | data-event | String | e.g. click | custom event to trigger tooltip offset | data-offset | Object | top, right, bottom, left | data-offset="{'top': 10, 'left': 10}" for specific and offset={{top: 10, left: 10}} for global multiline | data-multiline | Bool | true, false | support <br>, <br /> to make multiline class | data-class | String | your custom class | extra custom class, can use !important to cover react-tooltip's default class html | data-html | Bool | true, false | <p data-tip="<p>HTML tooltip</p>" data-html={true}></p> or <ReactTooltip html={true} /> delayHide | data-delay-hide | Number | | <p data-tip="tooltip" data-delay-hide='1000'></p> or <ReactTooltip delayHide={1000} /> delayShow | data-delay-show | Number | | <p data-tip="tooltip" data-delay-show='1000'></p> or <ReactTooltip delayShow={1000} /> border | data-border | Bool | true, false | Add one pixel white border

Using react component as tooltip

Check the example React-tooltip Test

Note:
  1. data-tip is necessary, because <ReactTooltip /> find tooltip via this attribute
  2. data-for correspond to the id of <ReactTooltip />
  3. When using react component as tooltip, you can have many <ReactTooltip /> in a page but they should have different id

Methods

ReactTooltip.hide() for hide the tooltip manually

ReactTooltip.rebuild() for re-bind tooltip to the corresponding element

I suggest always put <ReactTooltip /> in the Highest level or smart component of Redux, so you might need these static method to control tooltip's behaviour in some situations

License

MIT