Tooltips

A tooltip lets the user distinguish between a pop-up window that can be acted upon and a tooltip that he can't do anything about. It appears on hover, focus, or touch, and disappears after a short duration.

Example tooltip

 

Example tooltip with slightly longer text that uses multiple lines.

 
 
General CSS for tooltips

.tooltip {
  max-width: 170px;
  padding: 8px;
  pointer-events: none;
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
  border-radius: 3px;
  background: #33445C;
  transition: transform 200ms cubic-bezier(.4, 0, .2, 1), opacity 200ms, visibility 200ms 0s;
}

.tooltip::before {
  content: "";
  display: block;
  z-index: 100;
  position: absolute;
  -webkit-transform: translateX(-50%) rotate(45deg);
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: #33445C;
}

Tooltip variations

Tooltip with a central arrow at the bottom

Tooltip content

 
 
Tooltip with an arrow at the bottom right

Tooltip content

 
 
Tooltip with an arrow at the bottom left

Tooltip content

 
 
Tooltip with a central arrow at the top

Tooltip content

 
 
Tooltip with an arrow at the top right

Tooltip content

 
 
Tooltip with an arrow at the top left

Tooltip content

 
 
Additional CSS for tooltips

.tooltip[class*="arrow-top"]::before {
  top: -4px;
  border-radius: 2px 0 0;
}

.tooltip[class*="arrow-bottom"]::before {
  bottom: -4px;
  border-radius: 0 0 2px;
}

.tooltip.arrow-top-center::before,
.tooltip.arrow-bottom-center::before {
  left: 50%;
}

.tooltip.arrow-top-right::before,
.tooltip.arrow-bottom-right::before {
  left: calc(100% - 24px);
}

.tooltip.arrow-top-left::before,
.tooltip.arrow-bottom-left::before {
  left: 24px;
}