Easily add tooltips to a React app with react-tooltip library
Some actions that our users perform in our apps may not be obvious to them. Sometimes it's worth it to tell them what's going to happen after they perform a certain action (for instance - submit a form) before they click the button.
One of the way we can accomplish that is to add tooltips to our application so that it's easy to explain to users what's going to happen next.
In this lesson we are going to learn how to use react-tooltip to easily add tooltips to a simple React application, how to change their properties and how to have different tooltips for different buttons.
Instructor: [00:00] We have a simple app that displays a post. Underneath this post, we have two buttons which I am not entirely sure what they do. Sometimes, it happens that we need to add a bit of advice for users what was going to happen after they click the button.
[00:14] One way we can do this is to add Tooltips to our application. To do that, import ReactTooltip from 'react-tooltip', and add ReactTooltip to our application like this. We also need to provide what kind of text is going to be displayed whenever we hover over the button.
[00:33] I am going to set data-tip, "I agree." If we hover over this button, we're going to see our Tooltip saying that I agree with the statement that React is awesome. It's more obvious to the user.
[00:44] We can also add another data-tip to the second button saying that "I am not sure." We can see that over this button, we have a Tooltip "I agree." Over this button, we have a Tooltip "I am not sure."
[00:56] Currently, the Tooltip is following my pointer, but we might want to have it in a single place. To do that, change the effect to solid. If I hover over those buttons, we're going to see those Tooltips are going to stay in place.
[01:09] We can also change the type of these Tooltips. For instance, if I set the type to success, I am going to see this green Tooltip. If I change it to warning, I am going to see a yellow warning one.
[01:21] The problem that we have right now is that both of those Tooltips are identical. Perhaps, we want to have a different styles Tooltip for "I agree" and "I am not sure" buttons.
[01:30] To do that, we are going to copy and paste this Tooltip. We are going to change the type of this one to success. We need to set different IDs for those Tooltips. This one is going to have an ID of TooltipAgree. The second one is going to have an ID of TooltipDisagree.
[01:47] To specify which Tooltip goes with which button, we are going to use data for property. This one is going to be the data for TooltipAgree. The second one is going to be data for TooltipDisagree, like this.
[02:05] Now what we have is the desired effect. This one has a Tooltip of I agree. The second one has a different-styled Tooltip saying that I am not sure if React is awesome.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!