Components

Tooltips

A Tooltip is a small piece of contextual information about an element on the screen, which is displayed when a user hovers or focuses on the element it is describing. It is not focusable and cannot contain focusable content.

Standard Tooltips

Created with Sketch. David Denman Sutton Johnston Boden Johnston Tooltip
Created with Sketch. Tooltip Tooltip 6px 12px 12px 20px 8px 9px 
.tooltip-background {
background: #353C48;
border-radius: 2px;
}
.tooltip-text {
font-size: 1rem;
color: #FFFFFF;
text-align: center;
line-height: 21px;
}

Icon Label Tooltips

Component base

Created with Sketch. Advanced Search Advanced Search 10px 10px 4px

In Context

Screen Shot 2018-07-26 at 5.49.30 PM

Interaction (Based on Google)

hover-label 
.label-tooltip {
  background: rgba(97,97,97,0.90);
  border-radius: 2px;
  font-family: Lato-Bold;
  font-size: 10px;
  color: #FFFFFF;
  text-align: center;
}

Tooltip with Header

Group 8
Group 10 
.background-base{
background: #F4F6F9;
border: 1px solid #A8B7C7;
box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.20);
border-radius: 2px;
}

.tooltip-body-text{
font-family: Roboto-Regular;
font-size: 13px;
color: #002D41;
line-height: 19px;
}

.tooltip-header {
font-family: Lato-Bold;
font-size: 14px;
color: #FFFFFF;
padding: 10px 24px 7px 24px
}

Graph Tooltips

Created with Sketch. $124.89 
.tooltip_simple {
font-weight: 700;
font-size: 1rem;
color: #54698D;
background: #FFFFFF;
border: 1px solid #DFE3E6;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.10);
width: 73px;
height: 28px;
}
Created with Sketch. 04/15/2018 Previous Year: $3000.56 Current Year: $5686.01 
.tooltip_header {
font-size: 1.4rem;
color: #FFFFFF;
background: #002D41;
}

.color_marker_1 {
background: #0074D9;
border-radius: 3px;
width: 12px;
height: 12px;
}

.color_marker_2 {
background: #7FB9EC;
border-radius: 3px;
width: 12px;
height: 12px;
}

.table_row  {
font-weight: 700;
font-size: 1rem;
color: #002D41;
}

table_amount  {
font-weight: 700;
font-size: 1rem;
color: #54698D;
}

.table_container {
background: #FFFFFF;
border: 1px solid #DFE3E6;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.10);
width: 233px;
height: 115px;
}

Colors

Created with Sketch.

Overview of CSS Classes

Selector
Summary
Parent Selector

.tooltip-background

.tooltip-text

.tooltip-simple

.tooltip-header

.color-marker-1

.color-marker-2

.table-row

.table-amount

.table-container