Black Lives Matter. Support the Equal Justice Initiative.
Skip to main contentCarbon Design System

Tooltip

Color

Interactive tooltip

ClassPropertyColor token
.bx--tooltip__labeltext color$text-02
.bx--tooltip__triggersvg$icon-01
.bx--tooltip--shownbackground-color$inverse-02
.bx--tooltip__caretbackground-color$inverse-02
ptext color$inverse-01
Closed and open states for a tooltip

Example of closed and open states for a tooltip

Icon tooltip

ClassPropertyColor token
.bx--tooltip__trigger svgbackground-color$inverse-02
.bx--tooltip--iconbackground-color$inverse-02
ptext color$inverse-01

Definition tooltip

ClassPropertyColor token
.bx--tooltip__labeltext color$text-02
.bx--tooltip__triggerborder-bottom$interactive-04
.bx--tooltip--definitionbackground-color$inverse-02
ptext color$inverse-01

Typography

Tooltip labels and text should be set in sentence case.

PropertyFont-size (px/rem)Font-weightType token
.bx--tooltip__label12 / 0.75Regular / 400$label-01
p14 / 0.875Regular / 400$body-short-01

Structure

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

Interactive tooltip

ClassPropertypx / remSpacing token
.bx--tooltipmax-width240 / 15
.bx--tooltip__trigger svgheight, width16 / 1
.bx--tooltip__triggermargin-left8 / 0.5$spacing-03
.bx--tooltip--shownpadding16 / 1$spacing-05
.bx--tooltipmargin-top8 / 0.5$spacing-03
Structure and spacing measurements for an interactive tooltip

Structure and spacing measurements for an interactive tooltip | px / rem

Definition tooltip

ClassPropertypx / remSpacing token
.bx--tooltip--definition__bottom
.bx--tooltip--definition__top
max-width176 / 11
.bx--tooltip--definition__bottom
.bx--tooltip--definition__top
padding-top, padding bottom8 / 0.5$spacing-03
.bx--tooltip--definition__bottom
.bx--tooltip--definition__top
padding-left, padding-right16 / 1$spacing-05
.bx--tooltip__triggerborder-bottom1px
.bx--tooltip__caretmargin-top4px$spacing-02
Structure and spacing measurements for a definition tooltip

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

Icon tooltip

ClassPropertypx / remSpacing token
.bx--tooltip--icon__top:before
.bx--tooltip--icon__bottom:before
max-width176 / 11
.bx--tooltip--icon__top:before
.bx--tooltip--icon__bottom:before
padding-left, padding-right16 / 1$spacing-05
.bx--tooltip--icon__top:before
.bx--tooltip--icon__bottom:before
padding-top, padding-bottom2 / 0.125$spacing-01
.bx--tooltip__caretmargin-top8 / 0.5$spacing-03
Structure and spacing measurements for an icon tooltip

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

Placement

Tooltips should be placed below the tooltip icon unless it is within the height of the tooltip box plus 16px / 1rem of the bottom of the page. In that instance, the tooltip should appear above the icon or defined word. On mobile, tooltips can only appear below the tooltip icon.

Placement examples for a tooltip

Placement examples for a tooltip