How To Add Tooltip in React Application

Introduction

 

In this article, we will learn how to add  React material UI Tooltip in React applications. Tooltip is a pop-up that displays a message or information on hover, click or focus event. Material UI is one of the most popular UI frameworks developed by Google. The Material UI library is designed for faster, easier and developer-friendly user interface development. Now Material-UI is supported by all major browsers and platforms.

 

You can check my previous article in which we discussed ReactJS and its basic components from the below-mentioned links.  

• Add Material UI In React Application
• Add Material-UI Table In ReactJS Application

Prerequisites

• Basic Knowledge of React
• Visual Studio Code
• Node and NPM installed
• Material UI Installed

Create ReactJS project

 

Let's first create a React application using the following command.

npx create-react-app platform

Install Material-UI

 

Now Install Material-UI by using the following command.

npm install @material-ui/core --save

Now, right-click on the "src" folder and add a new component named 'Tooltipdemo.js'

 

First let’s add the following reference in this component.

import DeleteIcon from '@material-ui/icons/Delete';
import Editicon from '@material-ui/icons/Edit';
import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';

Add the following code in Tooltipdemo component.

import React, { Component } from 'react'
import DeleteIcon from '@material-ui/icons/Delete';
import Editicon from '@material-ui/icons/Edit';
import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
export class Tooltipdemo extends Component {
        render() {
                return (
                        <div>
                                <AppBar position="static">
                                        <Toolbar style={{ 'paddingLeft': "600px" }}>
                                                Material UI Tooltip
                    </Toolbar>
                                </AppBar>
                                <div style={{'marginBottom':"20px"}}>
                                <Tooltip title="Delete">
                                        <IconButton aria-label="delete">
                                                <DeleteIcon />
                                        </IconButton>
                                </Tooltip>
                                <Tooltip title="Edit">
                                        <IconButton aria-label="Edit">
                                                <Editicon />
                                        </IconButton>
                                </Tooltip>
                                </div>
                        </div>
                )
        }
}    
export default Tooltipdemo

Now run the project by using 'npm start' and hover the mouse on the button and check.

 

 

Tooltips

 

The Tooltip has 12 placement positions.

• RightTop
• RightCenter
• RightBottom
• TopLeft
• TopCenter
• TopRight
• BottomLeft
• BottomCenter
• BottomRight
• LeftTop
• LeftCenter
• LeftBottom

We can display toopltip on these positions.

 

Add the following code in the Tooltipdemo component.

import React, { Component } from 'react'
import DeleteIcon from '@material-ui/icons/Delete';
import Editicon from '@material-ui/icons/Edit';
import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Button from '@material-ui/core/Button';
export class Tooltipdemo extends Component {
        render() {
               return (
                        <div>
                                <AppBar position="static">
                                        <Toolbar style={{ 'paddingLeft': "600px" }}>
                                                Material UI Tooltip
                                  </Toolbar>
                                </AppBar>
                                <div style={{ 'marginBottom': "50px" }}>
                                        <Tooltip title="Add" placement="top">
                                                <Button>top</Button>
                                        </Tooltip>
                                        <Tooltip title="Add" placement="top-end">
                                                <Button>top-end</Button>
                                        </Tooltip>
                                </div>
                        </div>
                )
        }
}
export default Tooltipdemo

Now open app.js file and the following code in this file

import React from 'react';
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 and check the result.

 

 

Summary

 

In this article, we learned how we add tooltip in React applications using React material UI.