<commit_before>---
product: material-ui
title: React Tooltip component
components: Tooltip
githubLabel: 'component: tooltip'
materialDesign: https://material.io/components/tooltips
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
---

# Tooltip

<p class="description">Tooltips display informative text when users hover over, focus on, or tap an element.</p>

When activated, Tooltips display a text label identifying an element, such as a description of its function.

{{"component": "modules/components/ComponentLinkHeader.js"}}

## Basic tooltip

{{"demo": "BasicTooltip.js"}}

## 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.

{{"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"}}

## Custom child element

The tooltip needs to apply DOM event listeners to its child element.<commit_msg>[docs] Fix `placement choices` typo in Tooltip docs (#33571)<commit_after>---
product: material-ui
title: React Tooltip component
components: Tooltip
githubLabel: 'component: tooltip'
materialDesign: https://material.io/components/tooltips
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
---

# Tooltip

<p class="description">Tooltips display informative text when users hover over, focus on, or tap an element.</p>

When activated, Tooltips display a text label identifying an element, such as a description of its function.

{{"component": "modules/components/ComponentLinkHeader.js"}}

## Basic tooltip

{{"demo": "BasicTooltip.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"}}

## Custom child element

The tooltip needs to apply DOM event listeners to its child element.
{'fraction_non_alphanumeric': 0.11017918414029737, 'fraction_numerical': 0.0041936713686618375, 'mean_word_length': 5.14519906323185, 'pattern_counts': {'":': 10, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 4, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3101584', 'n_tokens_mistral': 779, 'n_tokens_neox': 761, 'n_words': 289}