How to Add Tooltip in React Application

Introduction

In this article, we will learn how to Add Tooltip in React Application using Material UI. Tooltip used to show additional information about the component when the user mouse over.

Prerequisites of React

• Familiarity with the HTML, JavaScript.
• node.js installed
• Basic knowledge of React JS
• Visual Studio Code

Create React Project

To create a React app, use the following command in the terminal.

npx create-react-app matui

Open the newly created project in Visual Studio Code, and install Material-UI; run the following command in your React project's root directory.

npm install @material-ui/core

Now right-click on the src folder and create a new component named 'Tooltipdemo.js'. We will create a simple modal popup using material UI. Import the following component from Material UI in the Tooltipdemo.js file.

import DeleteIcon from '@mui/icons-material/Delete';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import Button from '@mui/material/Button';
import {
    TooltipProps,
    tooltipClasses
} from '@mui/material/Tooltip';
import {
    styled
} from '@mui/material/styles';

Now, add the following code in the Tooltipdemo.js file.

import * as React from 'react';
import DeleteIcon from '@mui/icons-material/Delete';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import Button from '@mui/material/Button';
import { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
import { styled } from '@mui/material/styles';

export default function Tooltipdemo() {
    const CustomWidthTooltip = styled(({ className, ...props }: TooltipProps) => (
        <Tooltip {...props} classes={{ popper: className }} />
      ))({
        [`& .${tooltipClasses.tooltip}`]: {
          maxWidth: 500,
        },
      });
      
      const NoMaxWidthTooltip = styled(({ className, ...props }: TooltipProps) => (
        <Tooltip {...props} classes={{ popper: className }} />
      ))({
        [`& .${tooltipClasses.tooltip}`]: {
          maxWidth: 'none',
        },
      });
      
      const longText = `
      Aliquam eget finibus ante, non facilisis lectus. Sed vitae dignissim est, vel aliquam tellus.
      Praesent non nunc mollis, fermentum neque at, semper arcu.
      Nullam eget est sed sem iaculis gravida eget vitae justo.
      `;
    return (
        <div className="container mt-5">
            <h2>How to Add Tooltip in React Application</h2>
            <Tooltip title="Delete">
                <IconButton>
                    <DeleteIcon />
                </IconButton>
            </Tooltip>

            <Tooltip title="Add" arrow>
                <Button>Arrow</Button>
            </Tooltip>
            <Tooltip title={longText}>
        <Button sx={{ m: 1 }}>Default Width [300px]</Button>
      </Tooltip>
      <CustomWidthTooltip title={longText}>
        <Button sx={{ m: 1 }}>Custom Width [500px]</Button>
      </CustomWidthTooltip>
      <NoMaxWidthTooltip title={longText}>
        <Button sx={{ m: 1 }}>No wrapping</Button>
      </NoMaxWidthTooltip>
        </div>
    );
}

In the above code, we have added a material ui tooltip on the button. When the user mouseovers the button, a tooltip shows additional information showing in the tooltip. We have added 5 material UI buttons and showing the tooltip on mouseover on the button.

Now, import the Autocomplete component in the src/App.js file.

import logo from './logo.svg';
import './App.css';
import Tooltipdemo from './Tooltipdemo'
function App() {
  return (
    <div className="App">

      <Tooltipdemo/>
    </div>
  );
}

export default App;

Run the project using the 'npm start' command and check the result.

Summary

This article provides a step-by-step guide on creating Tooltip in React applications using the Material UI library.