Tooltip

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

Introduction

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.

Colors

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

Sizes

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

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.

Common examples

GitHub tooltip

The title prop can receive a custom React element.

Accessibility

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.

API

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

• <Tooltip />