DEV Community

Cover image for How to make an extremely reusable Tooltip component with React — and nothing else

How to make an extremely reusable Tooltip component with React — and nothing else

Vitor Paladini on August 19, 2020

EDIT: Ok, after publishing I realized that "nothing else" is an exaggeration. There is quite a bit of CSS too. But no other JS dependency 🙈 Too...
Collapse
 
jamesncox profile image
James Cox

I love when someone breaks something down you might see from a React component library like Material UI into their own reusable React components. I appreciate the time and effort you took to recreate something that most of us might take for granted. Great work!!

Collapse
 
vtrpldn profile image
Vitor Paladini

Hey, James. Thank you! I think that there is a lot to learn from doing so and it makes me super happy to know that I'm not the only one learning with it 😄

Collapse
 
jamesncox profile image
James Cox

Absolutely! There is always value in "looking under the hood" and recreating how something works. It reminds me of a recent DEV post that recreated common built-in JavaScript functions like map. You got me thinking about what component I could try to recreate. I sort of did that with my side navigation bar in my newest portfolio site, but it's not exactly as reusable as your tooltip!

Collapse
 
vtrpldn profile image
Vitor Paladini

Your head is the right place but I'd say my solution scratches a different itch.

title attr is great until you need to style or add custom behavior to your tooltips. If it was the absolute solution 100% of the time we wouldn't have decade-old tooltip libraries. 🙂

Collapse
 
gsarig profile image
Giorgos Sarigiannidis

Nice job!

A few thoughts:

  • Maybe it would make sense to add an option to trigger the tooltip on click instead of hover.
  • Hardcoding the direction might be problematic on some occasions. For example, on the desktop the tooltip might be better on the right, but on a smaller screen and depending on the layout, it might need a different alignment. So, a direction "auto" could be added, which would calculate the proper position depending on the element's position on the screen.
  • Since the tooltip can accept HTML, links, etc, it would be nice if it would stay open when moving the cursor above it. This could be handled with just CSS I think.
Collapse
 
vtrpldn profile image
Vitor Paladini • Edited

Hey, Giorgio. Thanks! You have excellent points.

Maybe it would make sense to add an option to trigger the tooltip on click instead of hover.

Agreed. IMO, tooltips are usually anonHover component but I can see value on toggling it on and off onClick.

Hardcoding the direction might be problematic on some occasions. For example, on the desktop the tooltip might be better on the right, but on a smaller screen and depending on the layout, it might need a different alignment. So, a direction "auto" could be added, which would calculate the proper position depending on the element's position on the screen.

Love the idea of direction "auto". Maybe it doesn't even need to be a specific direction but a prop like autoAdjust or something like that. I think Intersection Observer API would be the right tool for it, or maybe something simpler with media-queries.

Since the tooltip can accept HTML, links, etc, it would be nice if it would stay open when moving the cursor above it. This could be handled with just CSS I think.

I haven't thought of that, nice call. I'm not sure if it is a CSS only thing though, as the event that triggers the tooltip hide is the wrapper onMouseLeave 🤔. If I had to implement only one of the suggestions I'd pick this one for sure.

Collapse
 
theandersonn profile image
Anderson Nascimento

Parabéns pelo tutorial Vitor!
O Tooltip ficou enxuto e muito funcional.

Me ajudou aqui na aplicação de um trabalho.

Como estou utilizando styled, fiz pequenas adaptações.
gist.github.com/theandersonn/9964e...

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

What does the fox say!!

Collapse
 
saulpalv profile image
Saul Alonso Palazuelos • Edited

you may want to use display: contents on the .Tooltip-Wrapperclass

Collapse
 
z2lai profile image
z2lai

I'm really liking your extremely reusable components series. Each article is extremely helpful!

Collapse
 
vtrpldn profile image
Vitor Paladini

Hey, z2lai! Thanks for the feedback, it warms my heart to know that they are being helpful. 😄