Tooltips
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.
Simple Tooltips
<Tooltip title="Delete">
<IconButton aria-label="delete">
<DeleteIcon />
</IconButton>
</Tooltip>
<Tooltip title="Add" aria-label="add">
<Fab color="primary" className={classes.fab}>
<AddIcon />
</Fab>
</Tooltip>
<Tooltip title="Add" aria-label="add">
<Fab color="secondary" className={classes.absolute}>
<AddIcon />
</Fab>
</Tooltip>
Positioned Tooltips
The Tooltip has 12 placements choice.
They don’t have directional arrows; instead, they rely on motion emanating from the source to convey direction.
Customized tooltips
Here are some examples of customizing the component. You can learn more about this in the overrides documentation page.
Custom child element
The tooltip needs to apply DOM event listeners to its child element. If the child is a custom React element, you need to make sure that it spreads its properties to the underlying DOM element.
function MyComponent(props) {
// Spread the properties to the underlying DOM element.
return <div {...props}>Bin</div>
}
// ...
<Tooltip title="Delete">
<MyComponent>
</Tooltip>You can find a similar concept in the wrapping components guide.
Triggers
You can define the types of events that cause a tooltip to show.
Controlled Tooltips
You can use the open, onOpen and onClose properties to control the behavior of the tooltip.
<Tooltip onClose={handleTooltipClose} onOpen={handleTooltipOpen} open={open} title="Add">
<Button>Controlled</Button>
</Tooltip>
<Tooltip title={longText}>
<Button className={classes.button}>Default Width [300px]</Button>
</Tooltip>
<Tooltip title={longText} classes={{ tooltip: classes.customWidth }}>
<Button className={classes.button}>Custom Width [500px]</Button>
</Tooltip>
<Tooltip title={longText} classes={{ tooltip: classes.noMaxWidth }}>
<Button className={classes.button}>No wrapping</Button>
</Tooltip>
Interactive
A tooltip can be interactive. It won't close when the user hovers over the tooltip before the leaveDelay is expired.
<Tooltip title="Add" interactive>
<Button className={classes.button}>Interactive</Button>
</Tooltip>
<Tooltip title="Add">
<Button className={classes.button}>Non Interactive</Button>
</Tooltip>
Disabled Elements
By default disabled elements like <button> do not trigger user interactions so a Tooltip will not activate on normal events like hover. To accommodate disabled elements, add a simple wrapper element, such as a span.
<Tooltip title="You don't have permission to do this">
<span>
<Button disabled>A Disabled Button</Button>
</span>
</Tooltip>
If you're not wrapping a Material-UI component that inherits from
ButtonBase, for instance, a native<button>element, you should also add the CSS property pointer-events: none; to your element when disabled:
<Tooltip title="You don't have permission to do this">
<span>
<button disabled={disabled} style={disabled ? { pointerEvents: "none" } : {}}>
{'A disabled button'}
</button>
</span>
</Tooltip>Transitions
Use a different transition.
<Tooltip title="Add">
<Button>Grow</Button>
</Tooltip>
<Tooltip TransitionComponent={Fade} TransitionProps={{ timeout: 600 }} title="Add">
<Button>Fade</Button>
</Tooltip>
<Tooltip TransitionComponent={Zoom} title="Add">
<Button>Zoom</Button>
</Tooltip>
Showing and hiding
The tooltip is normally shown immediately when the user's mouse hovers over the element, and hides immediately when the user's mouse leaves. A delay in showing or hiding the tooltip can be added through the properties enterDelay and leaveDelay, as shown in the Controlled Tooltips demo above.
On mobile, the tooltip is displayed when the user longpresses the element and hides after a delay of 1500ms. You can disable this feature with the disableTouchListener property.