How to make a Tooltip in ReactJS🎖

It sounds easy but it’s not

What is a Tooltip?

so a tooltip is tiny info icons that you see on websites on which when you hover or take your pointer shows a text box that displays some information about that it may be text or some component.

Why do we need a tooltip in a UI?

so tooltips have a become basic building blocks of UI because it gives us the power to provide more info to the user without adding any extra clutter to our UI as the text remains hidden unless user hovers over the info icon and also allows us to simplify complicated things like PPV refers here is the price per view so it adds some elegance to our UI.

What is the use of a custom Tooltip component?

If you are a web devel you will find that these small components play a very important role in your application these small things have a quite powerful impact on your UX as well and it’s good to follow the DRY principle. And Making a small thing like this expands the horizon for usability and readability of your code.

What should our custom tooltip be able to do?

1. It should take in the input as a description prop.
2. Direction for providing in which direction we want to showcase the tooltip.
3. the custom class just in case the user wants to edit the CSS of the block

START

We will make a functional component which we will name ToolTipComponent and that will take 3 props :

1. description
2. className
3. direction

const ToolTipComponent = ({ description,direction,classname}) => {
return <div></div>
}

So we have made a basic component so far now we’ll make the structure

For tooltip, we want only 2 divs or containers and in between these 2, one container will be hidden

const ToolTipComponent = ({ description,direction,classname}) => {
    return <div className="tootltip-wrapper">
           <img
               src="https://img.icons8.com/color/50/000000/info.png"
               className="icon"
              />
      <div className="description">{description}</div>
</div>
}

So above structure is the 90% effort required from ReactJs.

The main effort comes from the styles file for now I am using scss as it becomes easy to manipulate nested objects in scss.

//styles.scss

.tooltip-wrapper{
  display: inline-block;
  position: relative;
  width:fit-content;
  .icon{
  cursor:pointer;
}
.description{
  display: none;
  text-align: center;
  padding:1px 2px;
  border-radius:5px;
  position: absolute;
  width:100px;
  max-width:300px;
  padding:4px 4px;
  word-wrap: nowrap;
  border:1px solid black;
  background-color: black;
  color:white;
  word-wrap: break-word;
  &::before{
    position: absolute;
    content:'';
  height: 0;
  width:0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom:8px solid black;
  transform: rotate(-90deg);
  }
}
&:hover{
  .description{
    display: block;}
  }
  
  
}
.right{
  .description{
    top:7px;
    margin-left:110%;
    &::before{
      left:-10px;
      top:10px;
      transform: rotate(-90deg);
    }
  }
 }
.bottom{
  .description{
    margin-top:10%;
    left:30%;
    &::before{
      transform: rotate(0);
      margin-top:-10%;
    }
  }
}
.top{
  .description{
    bottom:110%;
    margin-left:30%;
    &::before{
      transform: rotate(180deg);
      bottom: -8px;
    }
  }
}
.left{
  .description{
    right:0;
    margin-right:110%;
    top:0;
    &::before{
      transform: rotate(90deg);
      right:0;
      margin-right:-10px;
      margin-top:20%;
    }
  }
}

So above is the final css that we will require and will be needed by our component to function.

I can’t explain all the css as it took me around 2 hrs of hit and try to make it correct but will give you an overview.

so tooltip-wrapper is the main div that will be initially visible to the user and in that container, we will have 2 containers one will contain the icon and the other will contain text so initially, the text container will have display: none as we only want it to appear when a person hovers over the icon. So in order to achieve this, we will use positions and we will make the wrapper position relative and width to be fit-content and as soon as we make the display of description absolute our container takes shape of the icon and will produce the effect to the user as he is hovering on the icon but he will be hovering on the container on which we can trigger the hover event.

so above is the basic fundamental required in order to make a tooltip function apart from that you just have to play around with position and will be GTG.

https://codesandbox.io/s/github/saurav0705/react-custom-tooltip/tree/main/?file=/src/styles.scss:73-1377

Above is the working example for the same