How To Setup Tooltip In Next JS With Material UI/MUI Component

Introduction

Material UI or MUI is a library of UI components that implements Google's Material Design.

Tooltips display informative text when users hover over, focus on, or tap an element.

When activated, Tooltips display a text label identifying an element, such as a description of its function.

Preconditions

Javascript
Basic knowledge of NextJS
Node.js
V.S. Code,Visual Studio

We cover the below things,

Create Next application
Installation of Material UI Components
How to Apply Material UI components from the official website in NextJS.
How to Use MUI Tooltip.

Step 1

npx create-next-app materlapp
cd materlapp
npm i
npm run dev

Step 2

Run the below command for installing Material UI

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/material @mui/styled-engine-sc styled-components
npm install @mui/icons-material
npm i @mui/lab,

Create the files according to the below image,

How To Setup Tooltip In Next JS With Material UI/MUI Component

Step 3

Add the below code in the PositionedTooltips.js

import * as React from 'react';
	import Box from '@mui/material/Box';
	import Grid from '@mui/material/Grid';
	import Button from '@mui/material/Button';
	import Tooltip from '@mui/material/Tooltip';

	export default function PositionedTooltips() {
	  return (
		<Box sx={{ width: 500 }}>
		  <Grid container justifyContent="center">
			<Grid item>
			  <Tooltip title="Add" placement="top-start">
				<Button>top-start</Button>
			  </Tooltip>
			  <Tooltip title="Add" placement="top">
				<Button>top</Button>
			  </Tooltip>
			  <Tooltip title="Add" placement="top-end">
				<Button>top-end</Button>
			  </Tooltip>
			</Grid>
		  </Grid>
		  <Grid container justifyContent="center">
			<Grid item xs={6}>
			  <Tooltip title="Add" placement="left-start">
				<Button>left-start</Button>
			  </Tooltip>
			  <br />
			  <Tooltip title="Add" placement="left">
				<Button>left</Button>
			  </Tooltip>
			  <br />
			  <Tooltip title="Add" placement="left-end">
				<Button>left-end</Button>
			  </Tooltip>
			</Grid>
			<Grid item container xs={6} alignItems="flex-end" direction="column">
			  <Grid item>
				<Tooltip title="Add" placement="right-start">
				  <Button>right-start</Button>
				</Tooltip>
			  </Grid>
			  <Grid item>
				<Tooltip title="Add" placement="right">
				  <Button>right</Button>
				</Tooltip>
			  </Grid>
			  <Grid item>
				<Tooltip title="Add" placement="right-end">
				  <Button>right-end</Button>
				</Tooltip>
			  </Grid>
			</Grid>
		  </Grid>
		  <Grid container justifyContent="center">
			<Grid item>
			  <Tooltip title="Add" placement="bottom-start">
				<Button>bottom-start</Button>
			  </Tooltip>
			  <Tooltip title="Add" placement="bottom">
				<Button>bottom</Button>
			  </Tooltip>
			  <Tooltip title="Add" placement="bottom-end">
				<Button>bottom-end</Button>
			  </Tooltip>
		</Grid>
	  </Grid>
	</Box>
  );
}

Step 4

Add the below code in the index.js

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import PositionedTooltips from './pages/PositionedTooltips'

export default function Home() {
  return (
	<>
	  <div className={styles.container}>

		<h1 className={styles.title}>
		  Welcome to <a href="https://nextjs.org">Next.js!</a>
		</h1>
		<main className={styles.main}>
		  <PositionedTooltips />
		</main>

		<footer className={styles.footer}>
		  <a
			href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
			target="_blank"
			rel="noopener noreferrer"
		  >
			Powered by{' '}
			<span className={styles.logo}>
			  <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
			</span>
		  </a>
		</footer>
	  </div>
	  <br></br>
	  <br></br>
	  <br></br>
	  <br></br>
	  <br></br>
	</>
  )
}

Step 5

Add the following code in Home.module.css,

.container {
	  padding: 0 2rem;
	}

	.main {
	  min-height: 5vh;
	  padding: 2rem 0;
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	}

	.footer {
	  display: flex;
	  flex: 1;
	  padding: 2rem 0;
	  border-top: 1px solid #eaeaea;
	  justify-content: center;
	  align-items: center;
	}

	.footer a {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  flex-grow: 1;
	}

	.title a {
	  color: #0070f3;
	  text-decoration: none;
	}

	.title a:hover,
	.title a:focus,
	.title a:active {
	  text-decoration: underline;
	}

	.title {
	  margin: 0;
	  line-height: 1.15;
	  font-size: 4rem;
	}

	.title,
	.description {
	  text-align: center;
	}

	.description {
	  margin: 4rem 0;
	  line-height: 1.5;
	  font-size: 1.5rem;
	}

	.code {
	  background: #fafafa;
	  border-radius: 5px;
	  padding: 0.75rem;
	  font-size: 1.1rem;
	  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
		Bitstream Vera Sans Mono, Courier New, monospace;
	}

	.grid {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  flex-wrap: wrap;
	  max-width: 800px;
	}

	.card {
	  margin: 1rem;
	  padding: 1.5rem;
	  text-align: left;
	  color: inherit;
	  text-decoration: none;
	  border: 1px solid #eaeaea;
	  border-radius: 10px;
	  transition: color 0.15s ease, border-color 0.15s ease;
	  max-width: 300px;
	}

	.card:hover,
	.card:focus,
	.card:active {
	  color: #0070f3;
	  border-color: #0070f3;
	}

	.card h2 {
	  margin: 0 0 1rem 0;
	  font-size: 1.5rem;
	}

	.card p {
	  margin: 0;
	  font-size: 1.25rem;
	  line-height: 1.5;
	}

	.logo {
	  height: 1em;
	  margin-left: 0.5rem;
	}

	@media (max-width: 600px) {
	  .grid {
		width: 100%;
		flex-direction: column;
	  }
	}

	@media (prefers-color-scheme: dark) {
	  .card,
	  .footer {
		border-color: #222;
	  }
	  .code {
		background: #111;
	  }
	  .logo img {
		filter: invert(1);
	  }
	}

Step 6

Add the following code in package.json,

{
  "name": "materlapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
	"dev": "next dev",
	"build": "next build",
	"start": "next start",
	"lint": "next lint"
  },
  "dependencies": {
	"@emotion/react": "^11.10.4",
	"@emotion/styled": "^11.10.4",
	"@mui/icons-material": "^5.10.6",
	"@mui/lab": "^5.0.0-alpha.100",
	"@mui/material": "^5.10.6",
	"@mui/styled-engine-sc": "^5.10.6",
	"next": "12.3.1",
	"react": "18.2.0",
	"react-dom": "18.2.0",
	"styled-components": "^5.3.5"
  },
  "devDependencies": {
	"eslint": "8.23.1",
	"eslint-config-next": "12.3.1"
  }
}

Step 7

Run the following commands

npm i
npm run dev

How To Setup Tooltip In Next JS With Material UI/MUI Component

Summary

In this article, we learned how to create NextJS project, set Material UI/MUI, and how to add tooltip MUI component.