Skip to content
Edit this page

Tooltip

A toolip .

Introduction

<Tooltip />

Playground

bottom

Component

After installation, you can start building with this component using the following basic elements:

import Tooltip from '@mui/joy/Tooltip';

export default function MyApp() {
  return <Tooltip />;
}

Variants

The tooltip component supports the four global variants: solid (default), soft, outlined and plain.

<Tooltip title="Delete" variant="solid">
  <Button variant="solid">Solid</Button>
</Tooltip>
<Tooltip title="Delete" variant="soft">
  <Button variant="soft">Soft</Button>
</Tooltip>
<Tooltip title="Delete" variant="outlined">
  <Button variant="outlined">Outlined</Button>
</Tooltip>
<Tooltip title="Delete" variant="plain">
  <Button variant="plain">Plain</Button>
</Tooltip>

Colors

Every palette included in the theme is available via the color prop. Play around combining different colors with different variants.

Variant:

Sizes

The tooltip component comes with three sizes out of the box: sm, md (the default), and lg.

<Tooltip title="Delete" size="sm">
  <Button variant="plain">Small</Button>
</Tooltip>
<Tooltip title="Delete" size="md">
  <Button variant="plain">Medium</Button>
</Tooltip>
<Tooltip title="Delete" size="lg">
  <Button variant="plain">Large</Button>
</Tooltip>

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.



Arrow tooltips

You can use the arrow prop to give your tooltip an arrow indicating which element it refers to.

<Tooltip title="Add" arrow>
  <Button variant="plain">Arrow</Button>
</Tooltip>

Common examples

Github tooltip

The title prop can receive a custom React element.

[system] grey is no more recognized as color with the sx prop

Accessibility

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/)

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:

<button title="some more information">A button</button>

the title acts as an accessible description. If you want the tooltip to act as an accessible description you can pass describeChild. Note that you shouldn't use describeChild if the tooltip provides the only visual label. Otherwise, the child would have no accessible name and the tooltip would violate success criterion 2.5.3 in WCAG 2.1.

<Tooltip title="Delete">
  <IconButton>
    <DeleteIcon />
  </IconButton>
</Tooltip>
<Tooltip describeChild title="Does not add if it already exists.">
  <Button>Add</Button>
</Tooltip>