Tooltips

Tooltips

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

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

Simple Tooltips

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.



Customized Tooltips

If you have been reading the overrides documentation page but you are not confident jumping in, here's an example of how you can theme a tooltip.

⚠️ While the material design specification encourages theming, these examples are off the beaten path.

Triggers

You can define the types of events that cause a tooltip to show.

Controlled Tooltips

You can use the open, onOpen and onClose properties to control the behavior of the tooltip.

Variable Width

The Tooltip wraps long text by default to make it readable.

Interactive

A tooltip can be interactive. It won't close when the user hovers over the tooltip before the leaveDelay is expired.

Disabled Elements

By default disabled elements like Button do not trigger user interactions so a Tooltip will not activate on normal events like hover. To accomodate disabled elements, add a simple wrapper element like a span.

Transitions

Use a different transition.

Showing and hiding

The tooltip is normally shown immediately when the user's mouse hovers over the element, and hides immediately when the user's mouse leaves. A delay in showing or hiding the tooltip can be added through the properties enterDelay and leaveDelay, as shown in the Controlled Tooltips demo above.

On mobile, the tooltip is displayed when the user longpresses the element and hides after a delay of 1500ms. You can disable this feature with the disableTouchListener property.