Skip to main contentCarbon Design System

Toggletip

Color

Toggletip

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

Interactive states

StateElementPropertyColor token
Hovertrigger buttonsvg$icon-primary
Activetrigger buttonsvg$icon-primary
Focustrigger buttonborder$focus
Toggletip colors and interactive colors.

Typography

ElementFont-size (px-rem)Font-weightType token
Body text14px / 0.875remRegular / 400$body-01

Structure

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

Toggletip

ElementPropertypx / 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 toggletip.

Structure and spacing measurements for toggletip. | px / rem

Placement

Toggletip directions by default are set to auto. Upon opening, toggletips can detect the edges of the browser to properly be placed in view so the container does not get cutoff. Toggletips can instead use specific directions and may be positioned top, right, bottom, or left to the trigger item. Toggletips 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, toggletips can only appear below the toggletip UI trigger.

Placement examples for a toggletip

Placement examples for toggletip