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
The tooltip has a default style and a default positionning configuration
<Tooltip> My fabulous tooltip content </Tooltip> | Prop name | Prop type | Default |
|---|---|---|
| className | string | undefined |
| style | object | undefined |
| btnClassName | string | undefined |
| btnStyle | object | undefined |
| innerStyle | object | undefined |
| displayed | bool | false |
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.
importdefaultInnerStylefrom'react-responsive-tooltip/lib/script/styles/tooltip-inner';importdefaultTriggerStylefrom'react-responsive-tooltip/lib/script/styles/tooltip-trigger';// defaultInnerStyle is an immutable mapconstinnerStyle=defaultInnerStyle.set('fontSize','10pt');consttriggerStyle=defaultTriggerStyle.set('backgroundColor','blue');consttriggerLayout=<spanclassName='btn btn-default'>?</span>;<TooltiptriggerStyle={triggerStyle}triggerLayout={triggerLayout}innerStyle={innerStyle}> ... </Tooltip>'use strict';importTooltipfrom'react-responsive-tooltip';importReactfrom'react';constExample=React.createClass({render(){return(<div><h1>Simple tooltip example</h1><Tooltip><div><div>My tooltip text</div><div>Could be html or another React components </div></Tooltip><h1>Customize the trigger tooltip example</h1> const trigger = '<spanstyle={{pointer: 'help'}}>Could be text trigger also</span>'; <TooltipbtnLayout={trigger}><div>Another tooltip text</div></Tooltip></div> ); }});exportdefaultExample;$ npm run compileSources will be compiled with babel in the lib directory
You must have Babel 6 installed in global
$ npm install --global babel-cliBabel presets are in devDependencies, don't forget doing
$ npm install