Light React Tooltip

Simple light-weight react tooltip that can customize as you wish

Author

Thinunwan Wickramaarachchi

LinkedIn | Website | Demo

Installation

npm install light-react-tooltip

Usage

1. Import

   import LightReactTooltip from 'light-react-tooltip';

2. Include LightReactTooltip anywhere in your code.

   No need any exact location. Place it anywhere as you wish.

   <LightReactTooltip/>

3. Add className and data-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>

Demo

Demo