Tooltips are text labels that appear when the user hovers over, focuses on, or touches an element.

Tooltips identify an element when they are activated. They may contain brief helper text about its function. For example, they may contain text information about actionable icons.

Tooltip labels do not receive input focus.

Summoned by:

Hovering over an element with a cursor
Focusing on an element with a keyboard (usually the tab key)
Upon touch


Use tooltips for interactive imagery.


Tooltips usually don’t display rich information including images and formatted text.

Tooltips are different than ALT-attributes, which are intended primarily for static images.

Tooltips by default don’t have directional arrows; instead, they rely on motion emanating from the source to convey direction.

Move the pointer over the icon

Quick add


A tooltip is triggered by tapping and holding an item. Keep the tooltip displayed as long as the user continues to hold the element.

Motion details

The tooltip entrance occurs over 150ms, using the Deceleration Curve. It also exits over 150ms, using the Acceleration Curve.

Tooltip delay

User can control the delay of tooltip show by configuring the "delay" property.


300ms delay


500ms delay


1000ms delay


1500ms delay
Align Justify