A React responsive and customizable tooltip component
Works on desktop and touch device. Displayed on touch on touch device, hidden when any part of the page is touched again
Basic Usage
The tooltip has a default style and a default positionning configuration
<ToolTip>
My fabulous tooltip content
</ToolTip>
Available Props
Prop name | Prop type | Default |
---|---|---|
className | string | undefined |
style | object | undefined |
btnClassName | string | undefined |
btnStyle | object | undefined |
innerStyle | object | undefined |
displayed | bool | false |
Customization
You can override tooltip popover style with props innerStyle
If you want override some default style, you can import the default style and update it.
;; // defaultInnerStyle is an immutable mapconst innerStyle = defaultInnerStyle;const triggerStyle = defaultTriggerStyle; const triggerLayout = <span className='btn btn-default'>?</span>; <Tooltip triggerStyle=triggerStyle triggerLayout=triggerLayout innerStyle=innerStyle> ...</Tooltip>
Example
'use strict'; ;; const Example = React; ;
Compile es6 sources
$ npm run compile
Sources will be compiled with babel in the lib directory
You must have Babel 6 installed in global
$ npm install --global babel-cli
Babel presets are in devDependencies, don't forget doing
$ npm install