This is a simple react tooltip


1.0.23 years ago3 years agoMinified + gzip package size for light-react-tooltip in KB


Light React Tooltip

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


Thinunwan Wickramaarachchi

LinkedIn | Website | Demo


npm install light-react-tooltip


  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.

  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>



If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from