The Right Tool for the Job

It can be difficult figuring out how to organize and present information on a web page. You want to show the user all the relevant information to whatever view they are on, but you don’t want to overload the presentation. There’s many ways to implement proper information flow on a page, and tooltips are one way to help with it.

A tooltips show over elements when they are moused over, and they contain helpful bits of info relevant to that element. When the mouse leaves the element the tooltip goes away. Using tooltips grants you nuanced control over how information is presented. Let’s build a tooltip in React that follows our mouse.

We’re going to implement our tooltip by conditional rendering the tip only when the mouse is over the desired element. While our mouse hovers over the element we’ll update our state with the mouses x and y position values. We’ll use those values to position our tooltip. When the mouse leaves the element, we’ll update state to set our condition to false.

To start, we’ll initialize the state variables we will need, and then have the component return two elements: one that will trigger the tooltip and one that will be the tooltip.

Currently, our tooltip div isn’t being a very good tooltip at all, so let’s use our hover state variable to hide that element.

I’m using the && to short-circuit and but it can also be done with a ternary

OK, now our tooltip is hidden by default. We’ll use the onMouseOver event on our parent div to set hover to true. This even fires whenever the mouse enters the space of the element. While we’re at it, let’s add an onMouseLeave event that will set hover back to false, so that our tooltip will disappear when the mouse hovers out of our parent element.

Now our tooltip only shows up as we mouse over the other parent div, which is great, but I also want the tooltip to actually move with the mouse and look like a tooltip, so I’m going to add a little inline styling to our tooltip element and I’m going to add another event to our parent: onMouseMove. This event will record our mouse position in state and we’ll use that to set the position of the tooltip.

First let’s add our onMouseMove event:

Then we’ll add style to our tooltip:

I added 20, 10 to y, x respectively so that the tooltip would render with buffer space between it and the mouse

A couple things to note about this style object. First, we are setting the position of the element as fixed. This attribute lets us freely position our tooltip on the screen irrespective of its parent’s position. Secondly, this style is dynamically updating its position from the top and left of the screen by interpolating the values for x and y that we update to state. Because of this, our tooltip will follow our mouse while we hover over the parent div.

Now if we apply this style to our tooltip we get this:

Now that looks like a tooltip! There’s all sorts of other ways to implement this. You can have tooltips that appear at static positions relative to their associated element, tooltips that only show up after hovering a certain amount of time etc; they can be implemented using purely CSS if you make use of the :hover attribute and their are React plugins that let you add tooltip components, as well; but, I hope you had fun learning how to build one yourself, and I encourage you to try it out. Happy coding!