The MUI Tooltip component has lots of customization options. This tutorial focuses on positioning, the anchor arrow, and how to render different components and images internally in the Tooltip. If you are looking for styling inside the Tooltip, this post shows many different examples of styling the Tooltip component.
Here’s one of the examples we will create in this post (notice the blue arrow and positioning). You’ll see some sizing and line break code too.
The Resources section contains full code for this tutorial.
Material-UI Tooltip Custom Position
MUI Tooltip has a placement prop for controlling the position of the Tooltip relative to the hovered element that the Tooltip supports (a button in my example). There are twelve string values that the placement prop accepts, and a few examples are listed here: “right-start”, “right”, “right-end”, “top-start”, “top”, and so on.
The string values have a primary value (i.e. “top”) and a secondary value (i.e. “end”). “left-start” means that the Tooltip will appear to the left of the button, and will be visible at the “top” of the button height. “top-start” means the Tooltip will appear above the button and at the leftmost side possible.
MUI Tooltip Placement Example
Take a look at the two examples below: “left-start” and “left-end”. Notice the different Tooltip positioning. Interestingly, this positioning is controlled by the transform value on the Popper div of the Tooltip. Another important note is that you won’t see any visual difference in the placement of the Tooltip if the button doesn’t have enough height.
The div with the MuiTooltip-tooltip class doesn’t have any different styling on it in the DOM for the two placement values.
MUI Tooltip Position with Left, Right, Top, Bottom
The MUI placement prop uses CSS transform: translate to achieve Tooltip positioning. If you want to add additional precision beyond what the placement value provides, use left, right, top, and bottom styling.
The two buttons below both have placement="left-start". However, the first also has values top: "50px !important" and right: "100px !important" applied. Unfortunately, we have to use !important because the popper div uses inline styling instead of class styling to apply an inset value. As a reminder, inset is shorthand for top, left, bottom, and right all together.
One difficult point with styling using top, left, etc. is that the transform applied by MUI can cause the top, left, bottom, and right to stretch the Tooltip instead of moving it. For example, using "left-start" placement and left CSS positioning causes the div to stretch.
A rule of thumb is avoid the same values as the placement prop, i.e. if you use placement="right-end" then use left and top CSS value for additional positioning.
Material-UI Tooltip with Custom Component
The default Tooltip component renders as a styled div in the DOM. You can pass a custom component to take the place of the internal Tooltip div.
Here’s what happens if I pass a Stack component:
<Tooltip>
components={{Tooltip: Stack}}
</Tooltip>In theory, anything can be passed in. The required TypeScript type is Tooltip?: React.ElementType<any>.
Material-UI Tooltip with Image or Icon
Text is commonly passed to the Tooltip title prop, but the prop can also accept icons and other components.
I passed an Apple icon by like so: title={<AppleIcon/>}, and you can see what it looks like below.
With icons, you may want to use a custom component as discussed above. Passing a div as the Tooltip component will remove the default styling and give a simple rendering of the icon.
If you want to add an image, there are likely several ways to do it. Here I’ve taken the approach of adding a background image and no title text. I made the Tooltip a 100px square.
Interestingly, the title prop is required but I could set the value to false (so why require it?). I also passed a Stack component and added custom margin.
<Tooltip
title={false}
PopperProps={{
sx: {
width: 100,
height: 100,
marginRight: "32px !important",
backgroundImage: "url('https://picsum.photos/100')"
},
}}
components={{Tooltip: Stack}}
>Material-UI Tooltip Arrow Color and Position
The MUI Tooltip can include an “arrow” pointer simply by including prop arrow={true}. Styling is possible by targeting the MuiTooltip-arrow class and the :before pseudo-element.
Add the below inside the PopperProps sx prop to create the same styling as my tutorial.
"& .MuiTooltip-arrow": {
top: "-10px !important",
"&::before": {
backgroundColor: "blue",
},
}My example still uses position="left-start". It’s hard to tell, but the arrow is moved up by 10px. The arrow position is applied with inline styling by the MUI library so once again we have to use !important.
If you dig into the DOM, you’ll see a span and a pseudo-element that creates the arrow. The positioning lives on the span but the background color is applied to the :before, so I had to target it as well.
Material-UI Tooltip on Disabled Button Hover
The fundamental issue with a disabled button is that disabled elements do not fire DOM events like hover, so the Tooltip has no event to observe.
The easiest way to add a Tooltip to a disabled MUI button is by wrapping it in a div. I got this solution from this issue thread and it is the solution that worked during my research.
Wrapping the button in a div preserved the disabled styling for the underlying button. Another suggestion was to wrap the button in React.Fragment, but that didn’t work (despite some people claiming it did in the thread).
Resources and Related Links
Here’s how you can add a Tooltip to the MUI Badge component.
The Date Picker component has many styling similarities to the Tooltip.
Here’s a deep dive into the Stack component we used.
We can also use ToolTips in React Bootstrap, but the arrow requires lots of styling.
The full code for all examples is below. I left commented code in case you want to replicate the different examples above.
import * as React from "react";
import Button from "@mui/material/Button";
import Tooltip from "@mui/material/Tooltip";
import Stack from "@mui/material/Stack";
import AppleIcon from '@mui/icons-material/Apple';
export default function CustomTooltip() {
const longTooltipText = "Enabled Button Tooltip!\n !!!!!!!!!!!!!!!";
return (
<Stack direction="column" spacing={4}>
<Tooltip
title={longTooltipText}
arrow
//title={false}
//title={<Apple/>}
placement="left-start"
PopperProps={{
sx: {
whiteSpace: "pre-line",
// top: "50px !important",
// right: "100px !important",
// width: 100,
// height: 100,
// marginRight: "32px !important",
// backgroundImage: "url('https://picsum.photos/100')"
"& .MuiTooltip-arrow": {
top: "-10px !important",
"&::before": {
backgroundColor: "blue",
},
},
},
}}
//components={{Tooltip: Stack}}
>
<Button variant="outlined" sx={{ height: 100 }}>
Enabled
</Button>
</Tooltip>
</Stack>
);
}
