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.
{{"component": "@mui/internal-core-docs/ComponentLinkHeader"}}
## Basic tooltip
{{"demo": "BasicTooltip.js"}}
## Labels and descriptions
By default, the tooltip only labels its child element.
This is notably different from `title` which can either label or describe its child depending on whether the child already has a label.
For example, in the element below, the `title` acts as an accessible description:
```html
```
If you want the tooltip to act as an accessible description, you can pass the `describeChild` prop.
You shouldn't use `describeChild` if the tooltip provides the only visual label.
In that case, the child would have no accessible name and the tooltip would violate [WCAG 2.2 Success Criterion 2.5.3](https://www.w3.org/WAI/WCAG22/Understanding/label-in-name.html).
If the trigger already has either visible text or an `aria-label`, use the tooltip as a description and pass the `describeChild` prop.
Otherwise, you can use the default behavior and let the tooltip label the trigger.
{{"demo": "AccessibilityTooltips.js"}}
## Positioned tooltips
The `Tooltip` has 12 **placement** choices.
They don't have directional arrows; instead, they rely on motion emanating from the source to convey direction.
{{"demo": "PositionedTooltips.js"}}
## Customization
Here are some examples of customizing the component.
You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/).
{{"demo": "CustomizedTooltips.js"}}
## Arrow tooltips
You can use the `arrow` prop to give your tooltip an arrow indicating which element it refers to.
{{"demo": "ArrowTooltips.js"}}
## Distance from anchor
To adjust the distance between the tooltip and its anchor, you can use the `slotProps` prop to modify the [offset](https://popper.js.org/docs/v2/modifiers/offset/) of the popper.
{{"demo": "TooltipOffset.js"}}
Alternatively, you can use the `slotProps` prop to customize the margin of the popper.
{{"demo": "TooltipMargin.js"}}
## 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 props to the underlying DOM element.
```jsx
const MyComponent = React.forwardRef(function MyComponent(props, ref) {
// Spread the props to the underlying DOM element.
return (
Bin
);
});
// ...
;
```
If using a class component as a child, you'll also need to ensure that the ref is forwarded to the underlying DOM element. (A ref to the class component itself will not work.)
```jsx
class MyComponent extends React.Component {
render() {
const { innerRef, ...props } = this.props;
// Spread the props to the underlying DOM element.
return (
Bin
);
}
}
// Wrap MyComponent to forward the ref as expected by Tooltip
const WrappedMyComponent = React.forwardRef(function WrappedMyComponent(props, ref) {
return ;
});
// ...
;
```
## Triggers
You can define the types of events that cause a tooltip to show.
The touch action requires a long press due to the `enterTouchDelay` prop being set to `700`ms by default.
{{"demo": "TriggersTooltips.js"}}
## Controlled tooltips
You can use the `open`, `onOpen` and `onClose` props to control the behavior of the tooltip.
{{"demo": "ControlledTooltips.js"}}
## Variable width
The `Tooltip` wraps long text by default to make it readable.
{{"demo": "VariableWidth.js"}}
## Interactive
Tooltips are interactive by default (to pass [WCAG 2.2 Success Criterion 1.4.13](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html)).
It won't close when the user hovers over the tooltip before the `leaveDelay` is expired.
You can disable this behavior (thus failing the success criterion which is required to reach Level AA) by passing `disableInteractive`.
{{"demo": "NonInteractiveTooltips.js"}}
## Disabled elements
By default disabled elements like `