Skip to main content

Tooltip

Tooltips provide contextual information when a user hovers over a related element.

Code documentation

Web

Anatomy

The tooltip component is made up of three elements.

  1. Container
  2. Label
  3. Arrow
Anatomy diagram numbering three elements of a tooltip.

Variants

Position

An arrow is positioned along the bottom edge of a rounded rectangle that includes sample label text. The arrow is inset to align with the left edge of the label.
Top-start
An arrow is positioned along the bottom edge of a rounded rectangle that includes sample label text. The arrow is horizontally-centered with the label.
Top-center
An arrow is positioned along the bottom edge of a rounded rectangle that includes sample label text. The arrow is inset to align with the right edge of the label.
Top-end
An arrow is positioned along the top edge of a rounded rectangle that includes sample label text. The arrow is inset to align with the left edge of the label.
Bottom-start
An arrow is positioned along the top edge of a rounded rectangle that includes sample label text. The arrow is horizontally-centered with the label.
Bottom-center
An arrow is positioned along the top edge of a rounded rectangle that includes sample label text. The arrow is inset to align with the right edge of the label.
Bottom-end
An arrow is positioned along the right edge of a rounded rectangle that includes sample label text. The arrow is vertically-centered with the label.
Left
An arrow is positioned along the left edge of a rounded rectangle that includes sample label text. The arrow is vertically-centered with the label.
Right

Behavior

Timing

The tooltip becomes visible upon hovering over or tapping and holding the related element and should remain visible for as long as the user hovers over or long-presses the element.

Placement

Where possible, the arrow of the tooltip should be centered with the element it’s describing. The tooltip should have 4px space between the tip of the arrow and the container of the described element (or space occupied by line-height for text elements).

A tooltip is positioned above and horizontally-centered with an icon-only button.

The default behavior is for tooltips to flip to the opposite side when constrained by space. For example, a tooltip placed at the top of an element by default should flip to the bottom once the page scrolls to where the tooltip would be cut off by the top of the viewport. Similarly, right-positioned tooltips would flip to the left and vice-versa.

A sample card is positioned near the top of a container's edge. The card includes a tooltip placed below an icon-only button.

Width

Tooltips have a maximum width of 160px. Once text reaches the maximum width, it wraps to a new line and the tooltip container adjusts its height away from the arrow.

A tooltip is positioned above an icon-only button. Sample label text within the tooltip wraps to two lines at a point defined by the tooltip's maximum width.