This article focuses on the Tooltip component of Material UI. It would start by explaining what

the component is and why you should use it in a React Application. After that, the article will

teach how to import the tooltip element, a few useful props it has, how to set a tooltip’s position,

and how to disable it in certain cases. Finally, this article will examine how to control the

interaction a user has with a Tooltip, and properly manage the timing.

But before that, are you aware of the developer tool named PureCode? PureCode is an online

marketplace where you can download already-styled components for your projects. It saves

time for developers as it contains thousands of customizable components that fit every type of

need. Visit PureCode now to check the tool out.

Prerequisites to this article include knowledge of HTML, CSS, JavaScript, and the basics of

React. Those are technologies used throughout the article. If you have the prerequisites, then

get ready let’s go.

MATERIAL UI REACT TOOLTIP 26 Sep 2023 11 min read

What is Material UI?

Material UI is a popular React open-source Component Library that implements Google’s

Material Design. Here is a video explaining Material Design shortly:

Material UI comes with valuable components for React like buttons, modals, form elements, and

more. Developers easily import and use components from this library for their projects.

What is the Material UI Tooltip Component

Before encountering the Material UI Tooltip, a developer might have come across the `title`

attribute in HTML:

<a href="https://google.com" title="Google">Navigate to a Website</a>

In the example above, whenever a cursor hovers on “Navigate to a Website”, a small label

appears on top of the element with the text “Google”. The ‘ title ‘ attribute makes that text label

identifying the element possible. That label is an example of a Tooltip.

The Material UI Tooltip is a component that displays informative text when users hover over,

focus on, or tap on an element. Material UI takes the HTML `title` functionality further by having

a component that performs this function and more. Material UI’s Tooltip has improved styling

and is more versatile and customizable than the primitive `title` HTML attribute.

Why should you use a Tooltip?

There are many reasons why Websites use Tooltips. This section highlights some of them:

Clarification: Some user interface elements need further clarification for their function to be

understood in full. Sometimes a program might also need to convey extra information to the

user but at the same time not cluttering the user interface. In this case, a tooltip can solve that

problem.

Labelling Icons: An Icon Button is a button that has no text, only a clickable icon. For

someone unfamiliar with those icons, a Tooltip is helpful to show what the icons represent,

and a lot of websites take advantage of this.

Keyboard Shortcuts: If a button in an application has a keyboard shortcut, a tooltip is a

clever way of letting users know about this.

As you can see, Tooltips have practical uses in a user interface. They are always a good feature

for building intuitive and accessible user interfaces.

How to import the Material UI Tooltip

Before importing the Material UI Tooltip component, there are a few steps to take. These steps

are listed below:

1. Make sure you are running a React App: As mentioned earlier, Material UI is a React

Component Library, and so to use it you must be running React. You can easily start up

React using Vite to continue.

2. Install the Material UI Library: Working with Material UI requires installing it into the React

Application you already created. Use this guide to install the MUI library into your project.

3. Import the Tooltip component into the needed file: The tooltip element comes from the

Material UI Library, which you import using this instruction below.

import { Tooltip } from '@mui/material';

4. Wrap it around an element: The MUI Tooltip is extremely easy to use. The way to use it is

to wrap it around an existing component and give it a `title` prop. By just doing that, you have

set up the tooltip component.

import { Button, Tooltip } from "@mui/material";

function App() {

return (

<Tooltip title="Click to Submit Form">

<Button variant="contained">Submit</Button>

</Tooltip>

);

}

export default App;

Here is the output of the code block above:

Material UI Tooltip Props

As mentioned earlier, the Material UI Tooltip component extends the functionality of the `title`

attribute present in HTML, improving the styling, and making it further customizable. For

Material UI to achieve this, it provides some props developers can use with the component. This

section of the article will look into the most basic props.

children prop

Every `Tooltip` must have an element it refers to. The Tooltip’s children are the components that

the user hovers, focuses on, or taps to show the tooltip. Wrap the `Tooltip` around an element to

make the element a child of the Tooltip:

<Tooltip title="Click to Submit Form">

<Button variant="contained">Submit</Button>

</Tooltip>

From the example above, Tooltip accepts children, and the child element is a Material UI Button.

title prop

Tooltips display informative text. Developers can specify this informative text using the `title`

prop. Without this prop, nothing would be displayed when users perform one of the activities

that trigger a tooltip.

arrow prop

The `arrow` prop serves as a tooltip pointer. It points toward the component the tooltip belongs

to. Using this prop minimizes confusion, especially in a scenario where there are so many

tooltips on the page.

<Tooltip title="Click to Submit Form" arrow>

<Button variant="contained">Submit</Button>

</Tooltip>

followCursor prop

The `followcursor` prop makes the tooltip move around when someone hovers over an element

and moves the cursor. Add the `followCursor` prop to a `Tooltip`to use it.

<Tooltip title="Click to Submit Form" followCursor>

<Button variant="contained">Submit</Button>

</Tooltip>

How to set Tooltip Position

One of the many customizations a developer can make to a Tooltip is setting its position. There

are 12 placements or positions for the `Tooltip`, they are `top`, `right`, `left`, `bottom`, `top-start`,

`top-end`, `right-start`, `right-end`, `left-start`, `left-end`, `bottom-start`, and `bottom-end`.

The example below places a `Tooltip` on the `left-end`. Use the `placement` prop to set a

position:

<Tooltip title="Click to Submit Form" placement="left-end">

<Button variant="contained">Submit</Button>

</Tooltip>

How to set Material UI Tooltip Triggers

This set of props once activated helps to disable some default features that come with Material

UI Tooltips. This article has established that a Tooltip will display on hover, on focus, or on a tap

of an element it refers to. However, some of these behaviors can be disabled.

To disable the `Tooltip` when users hover over an element that has one, use the

`disableHoverListener` prop. This prop will prevent the hover from triggering the `Tooltip`. Also,

use the `disableFocusListener`, and `disableTouchListener` to prevent a focus or touch from

triggering the tooltip respectively.

Below is an example that disables a hover trigger:

<Tooltip title="Click to Submit Form" disableHoverListener>

<Button variant="contained">Submit</Button>

</Tooltip>

How to control Interaction in Material UI Tooltip

The Material UI Tooltip allows developers some control over the interaction users have with it. It

allows the developer to attach DOM event listeners to a `Tooltip` they can use to run commands

when specific events occur. Here are some `Tooltip` props that help with this.

open prop

The `open` prop is optional by default and will cause the `Tooltip` to display when its value is

`true`. It helps to set conditions when opening or hiding the tooltip is necessary. The illustration

below will show a `Tooltip` at the click of a button.

import { useState } from "react";

import { Button, Tooltip, Box } from "@mui/material";

function App() {

const [open, setOpen] = useState(false);

const handleClick = () => {

setOpen((prev) => !prev);

};

return (

<Box sx={{ mt: 5, display: "flex", justifyContent: "center" }}>

<Tooltip title="Click to Submit Form" open={open}>

<Button variant="contained" onClick={handleClick}>

Submit

</Button>

</Tooltip>

</Box>

);

}

export default App;

This is the behavior the code implements:

onOpen and onClose prop

The `onOpen` prop accepts a function that will run whenever the `Tooltip` is open. Similarly, the

`onClose` prop accepts a function that will run whenever users try to close the `Tooltip`. For

instance, the code below logs information into the console when users open and close the

Tooltip.

import { Button, Tooltip, Box } from "@mui/material";

function App() {

const handleOpen = () => {

console.log("This Tooltip has been closed");

};

const handleClose = () => {

console.log("This Tooltip has been closed");

};

return (

<Box sx={{ mt: 5, display: "flex", justifyContent: "center" }}>

<Tooltip

title="Click to Submit Form"

onOpen={handleOpen}

onClose={handleClose}

> 

<Button variant="contained">Submit</Button>

</Tooltip>

</Box>

);

}

export default App;

How to create a Tooltip custom React Element

Developers can use the Material UI Tooltip to create a custom React Element with added

styling. This means that customizing the default styles in a `Tooltip` is possible. There are a few

steps to take to achieve this:

1. Import `styled` from the Material UI Library

Importing the `styled` utility from Material UI is the first step to customizing a Tooltip. This

utility is useful for styling components and all Material UI components use it behind the

scenes.

import styled from '@mui/material/styles';

2. Import `tooltipClasses` from Material UI

To style a `Tooltip`, you need to know the class names of the Tooltip parts. `tooltipClasses` is

an object that contains all those class names so you just have to import it.

import { tooltipClasses } from '@mui/material/Tooltip';

3. Style the custom componentUsing both `styled` and `tooltipClasses`, you can style

components with this format:

import { Button, Box, Tooltip, tooltipClasses, styled } from "@mui/material";

const CustomTooltip = styled(({ className, ...props }) => (

<Tooltip {...props} classes={{ popper: className }} />

))(({ theme }) => ({

[`& .${tooltipClasses.tooltip}`]: {

backgroundColor: theme.palette.primary.light,

color: "rgba(0, 0, 0, 0.87)",

boxShadow: theme.shadows[1],

fontSize: 11,

},

}));

function App() {

return (

<div>

<Box sx={{ mt: 8, display: "flex", justifyContent: "center" }}>

<CustomTooltip title="This is a Customized Tooltip">

<Button variant="contained">Custom Tooltip</Button>

</CustomTooltip>

</Box>

</div>

);

}

export default App;

Here is the new Customized Tooltip:

With these few steps, you can give a tooltip a custom width, height, color, and many more.

Timing a Tooltip Display

Timing is an important concept to discuss when it comes to a `Tooltip`. By default, Material UI

has set the number of milliseconds it takes before showing and hiding the tooltip, among others.

However, as with most features in this library, it is easily customizable. This section will look into

props that allow a developer to do this.

Props Description

Default

Value

enterDelay The number of milliseconds to wait before showing a tooltip 100

enterTouchDelay

The number of milliseconds a touch must hold to show the

tooltip

700

enterNextDelay

The number of milliseconds to wait before showing a tooltip

if one is already open

0

leaveDelay The number of milliseconds to wait before hiding the tooltip 0

leaveTouchDelay

The number of milliseconds to wait after the user stops

touching an element before hiding it

1500

For instance, if you wanted the `Tooltip` to only close after one second, this is how you would do

it:

<Tooltip title="submit form" leaveDelay={1000}>

<Button variant="contained">Submit</Button>

</Tooltip>

Material UI Tooltip Transitions

Material UI is a very robust library that tries to include valuable modern User Interface elements.

These are elements that make sure the interface looks and works in a smooth manner. One set

of those elements is transitions.

A Transition is the process of a component changing from one state to another. In Material UI,

transitions are components that bring about smooth behavior when something on the page

changes from one state to the other. These transitions also have props developers can use to

further modify or customize their behavior.

The `Tooltip` prop for adding a transition is `TransitionComponent`. This is a more convenient

way to combine Material UI Tooltips with transitions, instead of wrapping a transition around a

Tooltip. However, transitions are React components that accept props, so use `TransitionProps`

to add those props in the `Tooltip`.

This section of the article will discuss some transition components you can use with Tooltips,

and how to add these transitions.

Grow Transition

`Grow` is the default animation for Tooltips. It is a transition that expands a tooltip into its

position, while at the same time fading it in. It has a `timeout` prop used for specifying the

duration of the transition in milliseconds. The default value of this prop is `’auto’` which

calculates the transition time automatically based on the height of the `Tooltip`.

Here is an example of a `Grow` transition with a timeout of 500 milliseconds. First of all, import

the `Grow` component from the Material UI.

import { Grow } from "@mui/material";

After that, use the `TransitionComponent` and `TransitionProps` props of a Tooltip.

<Tooltip

title="Hello there!"

TransitionComponent={Grow}

TransitionProps={{ timeout: 500 }}

> 

<Button variant="contained">Button</Button>

</Tooltip>

Fade Transition

Another transition that works well with Tooltips is the `Fade` transition. It is a transition that

fades in from a transparent tooltip to an opaque one. The timeout prop also works for this

transition. Here is an example of its usage:

import { Fade } from "@mui/material";

<Box sx={{ mt: 8, display: "flex", justifyContent: "center" }}>

<Tooltip

title="Hello there!"

TransitionComponent={Fade}

TransitionProps={{ timeout: 500 }}

> 

<Button variant="contained">Button</Button>

</Tooltip>

</Box>

Zoom Transition

Finally, the `Zoom` transition in Material UI is a transition that starts off very tiny and stretches

out to scale. The `timeout` prop works in this transition too. To use it, import it from the Material

UI Library first:

import { Zoom } from "@mui/material";

Then apply it to a `Tooltip`:

<Tooltip

title="Hello there!"

TransitionComponent={Zoom}

TransitionProps={{ timeout: 500 }}

> 

<Button variant="contained">Button</Button>

</Tooltip>

Things to Lookout for When Using a Tooltip

There are a few things you might want to consider when using a Tooltip. Tooltips are important

user interface additions, but when overused, or not used properly, can pose a challenge. This

section of the article will discuss some of the downsides of Tooltips, and how to avoid them.

Limited Visibility: Tooltips are usually small, and appear for a limited time before they go

back into hiding. Because of this behavior, users might miss the content of the Tooltip thus

posing a challenge. This is especially true when the tooltip is set to have a very short display

time. This condition is not ideal and is a scenario developers should avoid. To solve this

problem, you should make the display time of the tooltip enough for the user to notice and

read its content. Also, make sure the tooltip is not so tiny that it is hard to see clearly.

Length of Content: A Tooltip should be able to pass information across to the user in a

straightforward manner. When the tooltip’s content is very long, it becomes overwhelming to

the user who might not be expecting so much information. To avoid this, make a Tooltip’s

content short and straight to the point. If the application has to pass a lengthy informative text

to a user, then a Tooltip may not be the best solution to that problem. Using another strategy

like a modal might be the better choice.

User Interface Clutter: Another thing to look out for when using Tooltips in an application is

overuse. When Tooltips are overused in a User Interface, they lead to clutter. If Tooltips are

popping up everywhere the user hovers or clicks on, the user interface might no longer feel

intuitive and make the user exit the application. Use Tooltips when they are absolutely

necessary, and make sure they fit in nicely with the rest of the interface. That way, you will

avoid Tooltip user interface clutter.

Try Using Material UI Tooltip

As the article teaches, Tooltips display informative text when a user hovers, focuses or taps on

an element. This functionality is very useful in building intuitive user interfaces, and Material UI

provides developers with a highly customizable `Tooltip` component. You can also find most of

the things this article covered in this video:

This article starts by defining the Material UI Tooltip component and why you might want to use

it. After that it teaches how to install it, the basic props it requires, setting the position,

customizing it, and a lot more. Don’t forget to check out PureCode, the tool that gives

developers already-styled components for their projects, and saves them time.

Resources

For further study on the subject, check out the following resources:

Tooltip API

Customizing Material UI Components

‘Original article published here’