Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Easily add tooltips to a React app with react-tooltip library

    Tomasz ŁakomyTomasz Łakomy
    reactReact

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss