react-tooltip  


React Tooltip

Demo: https://trendmicro-frontend.github.io/react-tooltip

Installation

1. Install the latest version of react and react-tooltip:

``
npm install --save react @trendmicro/react-tooltip
`

2. At this point you can import @trendmicro/react-tooltip and its styles in your application as follows:

`js
import { Tooltip, Infotip } from '@trendmicro/react-tooltip';

// Be sure to include styles at some point, probably during your bootstraping
import '@trendmicro/react-tooltip/dist/react-tooltip.css';
`

Usage


`js
// Right tooltip

Settings

// Right tooltip with a function content
content={() => {
return ({'Right tooltip'});
}}
>
Hover on me

// Top tooltip
Hover on me
`
`js
// Infotip








tooltipStyle={{ wordWrap: 'break-word' }}
content="Pneumonoultramicroscopicsilicovolcanoconiosis is the longest word. Start01234567890123456789012345678901234567890123456789012345678901234567890123456789End Start0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789End"
>
Hover on me (infotip with long article)

``

API

$3

Name | Type | Default | Description
:--- | :--- | :------ | :----------
placement | string | 'right' | One of: 'top', 'right', 'bottom' and 'left'.
Tooltip will display at placement if possible, otherwise tooltip adjust it's location automatically.
enterDelay | number | 0 | The delay length (in ms) before the tooltip appears.
leaveDelay | number | 0 | The delay length (in ms) before the tooltip disappears.
hideOnClick | boolean | false | Hide tooltip when target been clicked.
disabled | boolean | false | Disable tooltip.
tooltipClassName | string | | The className apply to tooltip itself. You can use it to override style if need.
tooltipStyle | object | | The style apply to tooltip itself. You can use it to override style if need.
content | node or function | | The tooltip content. Required.

$3

Name | Type | Default | Description
:--- | :--- | :------ | :----------
placement | string | 'rightBottom' | One of: 'rightTop', 'rightBottom', 'leftTop', and 'leftBottom'.
Tooltip will display at placement if possible, otherwise tooltip adjust it's location automatically.
enterDelay | number | 0 | The delay length (in ms) before the infotip appears.
leaveDelay | number | 0 | The delay length (in ms) before the infotip disappears.
hideOnClick | boolean | false | Hide infotip when target been clicked.
disabled | boolean | false | Disable infotip.
tooltipClassName | string | | The className apply to infotip itself. You can use it to override style if need.
tooltipStyle | object | | The style apply to infotip itself. You can use it to override style if need.
content | node or function | | The infotip content. Required.

License

MIT