import Tooltip from '@mui/material/Tooltip';
// or
import { Tooltip } from '@mui/material';
Learn about the difference by reading this guide on minimizing bundle size.
Props of the native component are also available.
Name | Type | Default | Description |
---|---|---|---|
children* | element | - | Tooltip reference element. |
arrow | bool | false | If true , adds an arrow to the tooltip. |
classes | object | - | Override or extend the styles applied to the component. See CSS classes API below for more details. |
components | { Arrow?: elementType, Popper?: elementType, Tooltip?: elementType, Transition?: elementType } | {} | The components used for each slot inside. |
componentsProps | { arrow?: object, popper?: object, tooltip?: object, transition?: object } | {} | The extra props for the slot components. You can override the existing props or add new ones. |
describeChild | bool | false | Set to true if the title acts as an accessible description. By default the title acts as an accessible label for the child. |
disableFocusListener | bool | false | Do not respond to focus-visible events. |
disableHoverListener | bool | false | Do not respond to hover events. |
disableInteractive | bool | false | Makes a tooltip not interactive, i.e. it will close when the user hovers over the tooltip before the leaveDelay is expired. |
disableTouchListener | bool | false | Do not respond to long press touch events. |
enterDelay | number | 100 | The number of milliseconds to wait before showing the tooltip. This prop won’t impact the enter touch delay (enterTouchDelay ). |
enterNextDelay | number | 0 | The number of milliseconds to wait before showing the tooltip when one was already recently opened. |
enterTouchDelay | number | 700 | The number of milliseconds a user must touch the element before showing the tooltip. |
followCursor | bool | false | If true , the tooltip follow the cursor over the wrapped element. |
id | string | - | This prop is used to help implement the accessibility logic. If you don’t provide this prop. It falls back to a randomly generated id. |
leaveDelay | number | 0 | The number of milliseconds to wait before hiding the tooltip. This prop won’t impact the leave touch delay (leaveTouchDelay ). |
leaveTouchDelay | number | 1500 | The number of milliseconds after the user stops touching an element before hiding the tooltip. |
onClose | func | - | Callback fired when the component requests to be closed. Signature: function(event: React.SyntheticEvent) => void |
onOpen | func | - | Callback fired when the component requests to be open. Signature: function(event: React.SyntheticEvent) => void |
open | bool | - | If true , the component is shown. |
placement | ‘bottom-end’ | ‘bottom-start’ | ‘bottom’ | ‘left-end’ | ‘left-start’ | ‘left’ | ‘right-end’ | ‘right-start’ | ‘right’ | ‘top-end’ | ‘top-start’ | ‘top’ | ‘bottom’ | Tooltip placement. |
PopperComponent | elementType | - | The component used for the popper. |
PopperProps | object | {} | Props applied to the Popper element. |
slotProps | { arrow?: func | object, popper?: func | object, tooltip?: func | object, transition?: func | object } | {} | The props used for each slot inside. |
slots | { arrow?: elementType, popper?: elementType, tooltip?: elementType, transition?: elementType } | {} | The components used for each slot inside. |
sx | Array<func | object | bool> | func | object | - | The system prop that allows defining system overrides as well as additional CSS styles. |
title | node | - | Tooltip title. Zero-length titles string, undefined, null and false are never displayed. |
TransitionComponent | elementType | - | The component used for the transition. |
TransitionProps | object | {} | Props applied to the transition element. |
The ref
is forwarded to the root element.
You can use MuiTooltip
to change the default props of this component with the theme.
Slot name | Class name | Default component | Description |
---|---|---|---|
popper | .MuiTooltip-popper | Popper |
The component used for the popper. |
transition | - | Grow |
The component used for the transition. |
tooltip | .MuiTooltip-tooltip | - | The component used for the tooltip. |
arrow | .MuiTooltip-arrow | - | The component used for the arrow. |
(Rest of the document remains the same)
If you did not find the information in this page, consider having a look at the implementation of the component for more detail.