light-react-tooltip

This is a simple react tooltip

Stats

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

Readme

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

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 npms.io.