Tooltip API
API reference docs for the React Tooltip component. Learn about the props, CSS, and other APIs of this exported module.
Demos
Import
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 |
| 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 |
| 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 |
| 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 ( |
| 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 |
| 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 | 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 |
| 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 |
| 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. See the `sx` page for more details. |
| title | node | - | Tooltip title. Zero-length titles string, undefined, null and false are never displayed. |
| TransitionComponent | elementType | - | 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 |
ref is forwarded to the root element.Theme default props
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. Follow this guide to learn more about the requirements for this component. | |
| tooltip | .MuiTooltip-tooltip | The component used for the tooltip. | |
| arrow | .MuiTooltip-arrow | The component used for the arrow. |
These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.
| Class name | Rule name | Description |
|---|---|---|
| .MuiTooltip-popperArrow | popperArrow | Styles applied to the Popper component if arrow={true}. |
| .MuiTooltip-popperClose | popperClose | Styles applied to the Popper component unless the tooltip is open. |
| .MuiTooltip-popperInteractive | popperInteractive | Styles applied to the Popper component unless disableInteractive={true}. |
| .MuiTooltip-tooltipArrow | tooltipArrow | Styles applied to the tooltip (label wrapper) element if arrow={true}. |
| .MuiTooltip-tooltipPlacementBottom | tooltipPlacementBottom | Styles applied to the tooltip (label wrapper) element if placement contains "bottom". |
| .MuiTooltip-tooltipPlacementLeft | tooltipPlacementLeft | Styles applied to the tooltip (label wrapper) element if placement contains "left". |
| .MuiTooltip-tooltipPlacementRight | tooltipPlacementRight | Styles applied to the tooltip (label wrapper) element if placement contains "right". |
| .MuiTooltip-tooltipPlacementTop | tooltipPlacementTop | Styles applied to the tooltip (label wrapper) element if placement contains "top". |
| .MuiTooltip-touch | touch | Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch. |
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.
Source code
If you did not find the information in this page, consider having a look at the implementation of the component for more detail.