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...
For further actions, you may consider blocking this person and/or reporting abuse
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!!
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 😄
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!
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. 🙂Nice job!
A few thoughts:
Hey, Giorgio. Thanks! You have excellent points.
Agreed. IMO, tooltips are usually an
onHover
component but I can see value on toggling it on and offonClick
.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.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.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...
What does the fox say!!
you may want to use
display: contents
on the.Tooltip-Wrapper
classI'm really liking your extremely reusable components series. Each article is extremely helpful!
Hey, z2lai! Thanks for the feedback, it warms my heart to know that they are being helpful. 😄