Practical React series: 4. React Tooltip

This article is a series of practical React components. Here, in this article, we are going to learn how to add Tooltips in your react components.

What is a Tooltip?

A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element: Top, Right, Bottom, or Left.

So, without any further ado, let's start.

1. Install the react-modal package in your terminal by running this command:

      $ npm install @tippyjs/react
   

Firstly, import the package.

    import Tippy from "@tippyjs/react";
    import "tippy.js/dist/tippy.css";

And, add a Tippy component with the required properties of Tippy as shown below:

      <div>
              <Tippy content="Tooltip text">
                <button>Hover on me</button>
              </Tippy>
      </div>

You can also define HTML elements in the content property of Tippy.

      <div>
            <Tippy content=
                    {<span style={{ color: "red" }}>Another tooltip</span>}>
              <button>Hover on me</button>
            </Tippy>
       </div>

Also, look at the below sandbox for other properties.

That's it for today.

Thank you for reading through this article. I hope it provided a good understanding of how to add Tooltips in your react components.