Skip to main content

Color

Note that the color value of top bar of the Small and Medium Tooltips and the side color bars on Large Tooltip vary based on colors chosen for your data. Refer to the style tab on the Data Vis Overview page for base graph style specifications.

ColorSCSSHEX
Background$ui-01#ffffff
Border$ui-04#8897a2
Quantitative data value label$text-01#152935
Additional data value label (qualitative)$text-02#5a6872
Data increment label$text-02#5a6872

Typography

PropertyFont-size (px/rem)Font-weight
Quantitative data value label16/1Bold / 700
Additional data value label (qualitative)12/0.75Roman / 400
Data increment label14/0.875Bold / 700

Layer

LayerElevationBox-shadow
Overlay80 4px 8px 0 rgba(0,0,0,0.10);

Structure

There are three different tooltips types. Refer to the usage tab for when to use which tooltip size.

Small Tooltip

Width varies based on content length.

Sizepxrem
Height261.625
Padding: Internal100.625

Example of a Small Tooltip

Medium Tooltip

Width varies based on content length.

Sizepxrem
Height422.625
Padding: internal100.625
Color bar4-
Maximum label width1207.5

Example of a Medium Tooltip

Large Tooltip

Width varies based on content length.

Sizepxrem
Height18811.75
Padding: internal161
Padding: data sets (vertically)201.25
Padding: data sets (horizontally)161
Padding: color bar & data labels100.625
Color bar4-
Maximum label width1207.5

Example of a Large Tooltip

Tooltip responsiveness

The below images show how a Tooltip would respond to different amounts of data values. It also shows how the width of Tooltip changes when a label is at its max-widtgit h.

Examples of Tooltip responsiveness for different data value amounts

Example of max-width labels, one column, and two-column Tooltips