Tooltip API
API documentation for the React Tooltip component. Learn about the available props and the CSS API.
Import
import Tooltip from '@mui/material/Tooltip';
// or
import { Tooltip } from '@mui/material';Component name
The nameMuiTooltip can be used when providing default props or style overrides in the theme.Props
Props of the native component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| children* | element | Tooltip reference element. ⚠️ Needs to be able to hold a ref. | |
| title* | node | Tooltip title. Zero-length titles string are never displayed. | |
| arrow | bool | false | If true, adds an arrow to the tooltip. |
| classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
| components | { Arrow?: elementType, Popper?: elementType, Tooltip?: elementType, Transition?: elementType } | {} | The components used for each slot inside the Tooltip. Either a string to use a HTML element or a component. |
| componentsProps | { arrow?: object, popper?: object, tooltip?: object, transition?: object } | {} | The props used for each slot inside the Tooltip. Note that componentsProps.popper prop values win over PopperProps and componentsProps.transition prop values win over TransitionProps if both are applied. |
| 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) => voidevent: The event source of the callback. | |
| onOpen | func | Callback fired when the component requests to be open. Signature: function(event: React.SyntheticEvent) => voidevent: The event source of the callback. | |
| open | bool | false | 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 | Popper | The component used for the popper. |
| PopperProps | object | {} | Props applied to the Popper element. |
| sx | Array<func | object | bool> | func | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. | |
| TransitionComponent | elementType | Grow | The component used for the transition. Follow this guide to learn more about the requirements for this component. |
| TransitionProps | object | Props applied to the transition element. By default, the element is based on this Transition component. |
The
ref is forwarded to the root element.CSS
| Rule name | Global class | Description |
|---|---|---|
| popper | .MuiTooltip-popper | Styles applied to the Popper component. |
| popperInteractive | .MuiTooltip-popperInteractive | Styles applied to the Popper component unless disableInteractive={true}. |
| popperArrow | .MuiTooltip-popperArrow | Styles applied to the Popper component if arrow={true}. |
| popperClose | .MuiTooltip-popperClose | Styles applied to the Popper component unless the tooltip is open. |
| tooltip | .MuiTooltip-tooltip | Styles applied to the tooltip (label wrapper) element. |
| tooltipArrow | .MuiTooltip-tooltipArrow | Styles applied to the tooltip (label wrapper) element if arrow={true}. |
| arrow | .MuiTooltip-arrow | Styles applied to the arrow element. |
| touch | .MuiTooltip-touch | Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch. |
| tooltipPlacementLeft | .MuiTooltip-tooltipPlacementLeft | Styles applied to the tooltip (label wrapper) element if placement contains "left". |
| tooltipPlacementRight | .MuiTooltip-tooltipPlacementRight | Styles applied to the tooltip (label wrapper) element if placement contains "right". |
| tooltipPlacementTop | .MuiTooltip-tooltipPlacementTop | Styles applied to the tooltip (label wrapper) element if placement contains "top". |
| tooltipPlacementBottom | .MuiTooltip-tooltipPlacementBottom | Styles applied to the tooltip (label wrapper) element if placement contains "bottom". |
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.