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.