How to add a tooltip in React

When you are working with jQuery or a JavaScript HTML page then it’s easy to implement tooltip but It's a little bit complex to implement tooltip same as jQuery therefore today we’ll show you how to add tooltip in React application.

In this article, we will use the `react-tooltip` npm package to create a demo for the explanation. You can also find more examples that were created using the npm package.

1. Create a react application

First, we have to create a startup react application in which we can implement the demo. Refer to this article for more explanation.

2. Install npm package

As we mentioned previously, we will use the react-tooltip npm package so use the following command to install it in the react application.

npm i react-tooltip

3. Add tooltip in component

To add a tooltip in the react component, we have to first import a react-tooltip at the top of the react component.

import React from 'react';
import ReactTooltip from "react-tooltip";

function App() {
  return (
    <div class="App">
      <h3>How to add a tooltip in React</h3>
      <p data-tip="Like, Subscribe and Share!" data-event="click">Clue Mediator</p>
      <a href="https://www.cluemediator.com" target="_blank" data-tip="Click to visit Clue Mediator" rel="noopener noreferrer">www.cluemediator.com</a>
      <reacttooltip globaleventoff="click">
    </reacttooltip></div>
  );
}

export default App;

In the above code, we have displayed two different types of the tooltip. One is to display a tooltip on click and the second one is to display a tooltip on mouse hover.

We have passed the tooltip content in `data-tip` attribute for display purpose and set the `data-event="click"` attribute to show the tooltip on click event.

Also, we have set the `globalEventOff="click"` to hide the tooltip on document click. The single `ReactTooltip` component will work for multiple tooltips.

This package itself provides several options to configure a tooltip. Check out this link for more options.

This demo will work for both React component and React Hooks">React Hooks applications.

4. Output

Let’s run the project and check out the output in the browser.

Output - How to add a tooltip in React - Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

Github Repository StackBlitz Project