How to Use Material UI Tooltip Component Like a Pro
Category: Business
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:
Navigate to a Website
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 (
);
}
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:
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.
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.
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:
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:
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 (
);
}
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 (
);
}
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 }) => (
))(({ theme }) => ({
[`& .${tooltipClasses.tooltip}`]: {
backgroundColor: theme.palette.primary.light,
color: "rgba(0, 0, 0, 0.87)",
boxShadow: theme.shadows[1],
fontSize: 11,
},
}));
function App() {
return (
);
}
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:
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.
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";
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`:
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’
Blog Directory