Light React Tooltip
Simple light-weight react tooltip that can customize as you wish
Author
Thinunwan Wickramaarachchi
Installation
npm install light-react-tooltip
Usage
-
Import
import LightReactTooltip from 'light-react-tooltip';
-
Include
LightReactTooltip
anywhere in your code.No need any exact location. Place it anywhere as you wish.
<LightReactTooltip/>
-
Add
className
anddata-tip
to your existing button or element.This can be any of your element that you mouse hover so the auto generating tooltip will shows in top of your element.
<button className={"light-react-tooltip"} data-tip={"this is your hover text"}>This is your button or any element</button>
Thats it. You are done with the tooltip. Cheers ..... :)
Additional custom options
-
if you want your own styles add them via a prop as follows
const styles = { backgroundColor: 'red', color: 'blue', .......... };
<LightReactTooltip style={styles}/>
-
if you want to change tooltip position add it via a prop as follows
<LightReactTooltip position={"topLeft"}/> <LightReactTooltip position={"topRight"}/> <LightReactTooltip position={"bottomLeft"}/> <LightReactTooltip position={"bottomRight"}/>
-
if you want different tooltips in same page then add more
LightReactTooltip
components with a prop for custom className as follows<LightReactTooltip tooltipClassName={"light-react-tooltip-1"} position={"topLeft"} style={style1}/> <LightReactTooltip tooltipClassName={"light-react-tooltip-2"} position={"topRight"} style={style2}/>
<button className={"light-react-tooltip-1"} data-tip={"this is your hover text 1"}>button 1</button> <button className={"light-react-tooltip-2"} data-tip={"this is your hover text 2"}>button 2</button>