Skip to content


Tooltips display informative text when users hover over, focus on, or tap an element.


<Tooltip />




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 />;


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

Press Enter to start editing


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



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

Press Enter to start editing

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.

Press Enter to start editing

Common examples

GitHub tooltip

The title prop can receive a custom React element.


Here are a few tips for ensuring an accessible link component, based on WAI-ARIA Authoring Practices:

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.

Press Enter to start editing


See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.