Skip to main contentCarbon Design System

Tooltip

The following page documents visual specifications such as color, typography, structure, and size.

Color

Standard tooltip color

ElementPropertyColor token
Labeltext-color$text-secondary
Trigger buttonsvg$icon-secondary
Containerbackground-color$background-inverse
Texttext-color$text-inverse

Standard tooltip interactive states


StateElementPropertyColor token
Hovertriggersvg$icon-primary
Activetriggersvg$icon-primary
Focustriggerborder$focus
Closed and open states for an icon button tooltip

Example of closed (top), hover (middle), and focus (bottom) states for a standard tooltip

Icon button tooltip color

ElementPropertyColor token
Containerbackground-color$background-inverse
Texttext-color$text-inverse

Icon button tooltip interactive states

Icon button tooltip states rely on what kind of button is being used. Refer to button styles for specific hover and focus states.

Closed and open states for an icon button tooltip

Example of closed (top), hover (middle), and focus (bottom) states for an icon button tooltip

Definition tooltip color

ElementPropertyColor token
Labeltext-color$text-secondary
Triggerborder$border-strong
Containerbackground-color$background-inverse
Texttext-color$text-inverse

Definition tooltip interactive states


StateElementPropertyColor token
Hovertriggerborder$border-interactive
Activetriggerborder$border-interactive
Focuslabel and borderborder$focus
States for definition tooltip

Example of closed (top-left), hover (top-right), active (bottom-left) and focus (bottom-right) states for definition tooltip

Typography

Tooltip labels and text should be set in sentence case.

ElementFont size (px/rem)Font weightType token
Label12 / 0.75Regular / 400$label-01
Body text14 / 0.875Regular / 400$body-01

Structure

All tooltip types have a varying height based on the amount of content they contain.

Standard tooltip structure

ClassPropertypx / remSpacing token
Containermax-width288 / 18
padding16 / 1$spacing-05
margin-top8 / 0.5$spacing-03
Trigger iconheight, width16 / 1
margin-left8 / 0.5$spacing-03
Structure and spacing measurements for a standard tooltip

Structure and spacing measurements for a standard tooltip | px / rem

Icon button tooltip structure

ClassPropertypx / remSpacing token
Containermax-width208 / 13
padding-left, padding-right16 / 1$spacing-05
padding-top, padding-bottom2 / 0.125$spacing-01
Caretmargin-top4 / 0.25$spacing-02
Structure and spacing measurements for an icon button tooltip

Structure and spacing measurements for an icon button tooltip | px / rem

Definition tooltip structure

ElementPropertypx / remSpacing token
Containermax-width176 / 11
padding-top, padding-bottom8 / .5$spacing-04
padding-left, padding-right8 / .5$spacing-04
margin-top4 / 0.25$spacing-02
Triggerborder-bottom1 px
Structure and spacing measurements for a definition tooltip

Structure and spacing measurements for a definition tooltip | px / rem

Default placement

Tooltip directions, by default, are set to auto. Upon opening, tooltips can detect the edges of the browser to be placed in view so the container does not get cutoff. Tooltips can instead use specific directions and may be positioned topright, bottom, or left of the trigger item. Tooltips should be placed at least 16px / 1rem off of the bottom of the page and not bleed off page or behind other content. On mobile, tooltips can only appear below the tooltip icon.

Placement examples for a tooltip

Placement examples for a tooltip

Feedback

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.