New tooltip scss component

ui/app/styles/charts/tooltip.scss

@@ -1,7 +1,7 @@
 .chart {
   position: relative;
 
-  .tooltip {
+  .chart-tooltip {
     position: absolute;
     top: 0;
     display: none;
@@ -28,7 +28,7 @@
       transform: translateX(-7px);
       left: 50%;
       bottom: -8px;
-      z-index: 2;
+      z-index: $z-tooltip;
     }
 
     &::after {
@@ -44,7 +44,7 @@
       transform: translateX(-6px);
       left: 50%;
       bottom: -6px;
-      z-index: 2;
+      z-index: $z-tooltip;
     }
 
     &.active {

ui/app/styles/components.scss

@@ -9,3 +9,4 @@
 @import "./components/node-status-light";
 @import "./components/status-text";
 @import "./components/timeline";
+@import "./components/tooltip";

ui/app/styles/components/tooltip.scss

@@ -0,0 +1,56 @@
+.tooltip {
+  position: relative;
+}
+
+.tooltip::after {
+  content: attr(aria-label);
+  background: $black;
+  border-radius: $radius;
+  display: inline-block;
+  opacity: 0;
+  max-width: 250px;
+  color: $white;
+  font-size: $size-7;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.25;
+  white-space: nowrap;
+  vertical-align: middle;
+  padding: 5px 10px;
+  margin: 0;
+  position: absolute;
+  z-index: $z-tooltip;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  pointer-events: none;
+  transition: bottom 0.1s ease-in-out;
+}
+
+.tooltip::before {
+  pointer-events: none;
+  display: block;
+  opacity: 0;
+  content: "";
+  width: 0;
+  height: 0;
+  border-top: 6px solid $black;
+  border-right: 6px solid transparent;
+  border-left: 6px solid transparent;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  margin-left: -6px;
+  z-index: $z-tooltip;
+  transition: top 0.1s ease-in-out;
+}
+
+.tooltip:hover::after {
+  opacity: 1;
+  bottom: 120%;
+}
+
+.tooltip:hover::before {
+  opacity: 1;
+  top: -20%;
+}

ui/app/styles/core.scss

@@ -38,6 +38,11 @@ $text: $black;
 $header-height: 112px;
 $gutter-width: 250px;
 
+$icon-dimensions: 1.25rem;
+$icon-dimensions-small: 1rem;
+$icon-dimensions-medium: 1.5rem;
+$icon-dimensions-large: 2.5rem;
+
 // Bring in the rest of Bulma
 @import "bulma/bulma";
 
@@ -45,6 +50,7 @@ $gutter-width: 250px;
 @import "./core/buttons";
 @import "./core/columns";
 @import "./core/forms";
+@import "./core/icon";
 @import "./core/level";
 @import "./core/menu";
 @import "./core/message";

ui/app/templates/components/distribution-bar.hbs

@@ -12,7 +12,7 @@
     activeDatum=activeDatum
   )}}
 {{else}}
-  <div class="tooltip {{if isActive "active" "inactive"}}" style={{tooltipStyle}}>
+  <div class="chart-tooltip {{if isActive "active" "inactive"}}" style={{tooltipStyle}}>
     <ol>
       {{#each _data as |datum index|}}
         <li class="{{if (eq datum.index activeDatum.index) "active"}}">