diff --git a/ui/app/styles/charts/tooltip.scss b/ui/app/styles/charts/tooltip.scss
index 3e128134b..028b7b944 100644
--- a/ui/app/styles/charts/tooltip.scss
+++ b/ui/app/styles/charts/tooltip.scss
@@ -15,6 +15,10 @@
     pointer-events: none;
     z-index: $z-tooltip;
 
+    &.is-snappy {
+      transition: 0.2s top ease-out, 0.05s left ease-out;
+    }
+
     &::before {
       pointer-events: none;
       display: inline-block;
diff --git a/ui/app/templates/components/line-chart.hbs b/ui/app/templates/components/line-chart.hbs
index caf237d4e..a5add6a24 100644
--- a/ui/app/templates/components/line-chart.hbs
+++ b/ui/app/templates/components/line-chart.hbs
@@ -16,7 +16,7 @@
   <g class="x-axis axis" transform="translate(0, {{xAxisOffset}})"></g>
   <g class="y-axis axis" transform="translate({{yAxisOffset}}, 0)"></g>
 </svg>
-<div class="chart-tooltip {{if isActive "active" "inactive"}}" style={{tooltipStyle}}>
+<div class="chart-tooltip is-snappy {{if isActive "active" "inactive"}}" style={{tooltipStyle}}>
   <ol>
     <p>
       <span class="label">