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:

<span class="token keyword">import</span> Tooltip <span class="token keyword">from</span> <span class="token string">'@mui/joy/Tooltip'</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">MyApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Tooltip</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

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

(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:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>some more information<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>A button<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>

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