Look at Me!!! Ensure Your Users See Your Tooltips With This Fun React / Material UI Snippet
After deploying a recent project and tracking user activity using Google Analytics, I realized some of my users weren’t able to divine how to navigate through the application. Implementing a legend or big shiny buttons might be options on larger viewports, but with maintaining responsiveness for mobile devices one of my top priorities, finding a solution when screen real estate is at a premium was leaving me scratching my head for a solution.
Tooltips came to mind, but that came with its own set of issues as some iconography used to inform content is attached to say, a Menu Item. For a desktop user, hovering would display a tooltip, but on a mobile device there isn’t an effective way to display a tooltip unless a user somehow decides to do a long press. I could disable the click from propagating from the icon to the menu, but that didn’t feel like a great solution either.
Thankfully, the wonderful creators of the @material-ui react library expose the open property for a Tooltip and we can wire the tooltips to display on component load.
Staring at that tooltip for a long time might make the behavior feel unintended, though, so let’s set it to disappear after a timeout. React Hooks to the rescue!
Even though I traditionally use MobX for global state management, there’s plenty of room for useState when certain values can stay localized. A simple boolean state value and a setTimeout are all we need here to toggle the tooltips off after a few seconds. Voila!
After using functional components and React Hooks exclusively for the last few months, I can’t imagine I ever dealt with classes and lifecycle methods. If you haven’t made the transition, now’s the time!
