Instructor: 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.
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.
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.
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."
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.
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.
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.
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.
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.
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.