Build your own React Tooltip Component
Tags: react, hooks, coding, frontend
Published: 2020-10-31 23:14:22

Hello! Happy Samhain/Halloween!!! This a very spooky fast article where I would like to show you how I built a react tooltip on my latest side-project.

This is a simple Tooltip component, and even I know there are great libs out there, I'm always betting on building mine first before moving and add a new dependency to my project, let's go...

I'm using tailwindcss for this one, if you are not using tailwindcss in your React project please stop right now and go to https://tailwindcss.com/ and take a look, I have also a couple of starters on github for CRA and Nextjs you may want to clone for a quick start:
Nextjs -> https://github.com/alexandprivate/next-netlify-tailwind-starter
CRA -> https://github.com/alexandprivate/cra-tailwind-router-starter

Now do let's see the code 

Full component

```javascript
function Tooltip({ children, tooltipText }) {
    const tipRef = React.createRef(null);
    function handleMouseEnter() {
        tipRef.current.style.opacity = 1;
        tipRef.current.style.marginLeft = "20px";
    }
    function handleMouseLeave() {
        tipRef.current.style.opacity = 0;
        tipRef.current.style.marginLeft = "10px";
    }
    return (
        <div
            className="relative flex items-center"
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
        >
            <div
                className="absolute whitespace-no-wrap bg-gradient-to-r from-black to-gray-700 text-white px-4 py-2 rounded flex items-center transition-all duration-150"
                style={{ left: "100%", opacity: 0 }}
                ref={tipRef}
            >
                <div
                    className="bg-black h-3 w-3 absolute"
                    style={{ left: "-6px", transform: "rotate(45deg)" }}
                />
                {tooltipText}
            </div>
            {children}
        </div>
    );
}
```

A couple of clarifications, the tooltip always opens to the right in this case but you can always tweak the direction or even create a prop to control it

I'm using ref to avoid setting a state to show or hide the tooltip, these ways the component doesn't have to deal with re-renders

```javascrtip
const tipRef = React.createRef(null);
```

and handling the show and hide events with onMouse API

```javascript
    function handleMouseEnter() {
        tipRef.current.style.opacity = 1;
        tipRef.current.style.marginLeft = "20px";
    }
    function handleMouseLeave() {
        tipRef.current.style.opacity = 0;
        tipRef.current.style.marginLeft = "10px";
    }
```

There is a prop for the tooltip text and children to use this as a composition, so you may use the component like this

Now you just need to wrap an element where you want to show the tooltip at, for example on a Nextjs Link

```javascript
    <Tooltip tooltipText="Shop Insights">
          <Link href="/insights">
                 <a>
                    <AiOutlineAlert className="text-3xl" />
                 </a>
          </Link>
    </Tooltip>
```

And you will get something like this...

![ezgif.com-gif-maker](https://dev-to-uploads.s3.amazonaws.com/i/6t03blon4mpmgf1ddc4x.gif)

Happy coding and don't eat too many candies today!