diff --git a/src/app/shared/components/VueTooltip/VueTooltip.vue b/src/app/shared/components/VueTooltip/VueTooltip.vue
index 6d8579ba..8c5c5363 100644
--- a/src/app/shared/components/VueTooltip/VueTooltip.vue
+++ b/src/app/shared/components/VueTooltip/VueTooltip.vue
@@ -73,18 +73,18 @@
     }
 
     &:before {
-      background:  $brand-accent;
-      color:       $bg-color;
+      background:  $tooltip-bg;
+      color:       $tooltip-color;
       content:     attr(data-tip);
-      padding:     4px 8px;
+      padding:     $tooltip-padding;
       top:         -36px;
       white-space: nowrap;
-      box-shadow:  $panel-shadow;
+      box-shadow:  $tooltip-shadow;
     }
 
     &:after {
       border-right: 6px solid transparent;
-      border-top:   6px solid $brand-accent;
+      border-top:   6px solid $tooltip-bg;
       border-left:  6px solid transparent;
       content:      '';
       height:       0;
@@ -104,6 +104,6 @@
   }
 
   .highlight {
-    border-bottom: 1px dashed $brand-accent;
+    border-bottom: 1px dashed $tooltip-highlight-color;
   }
 </style>
diff --git a/src/app/shared/styles/_variables.scss b/src/app/shared/styles/_variables.scss
index 71cbf06c..94cdfc25 100644
--- a/src/app/shared/styles/_variables.scss
+++ b/src/app/shared/styles/_variables.scss
@@ -178,7 +178,6 @@ $tab-group-header-item-hover-bg: $brand-primary;
 $tab-item-transition: transform $transition-duration linear;
 
 /* CheckBox */
-
 $checkbox-color: $text-color;
 $checkbox-padding: 0;
 $checkbox-margin: $grid-unit 0;
@@ -188,4 +187,11 @@ $checkbox-transition: background $transition-duration cubic-bezier(0, .84, .83,
 $checkbox-check: 2px solid #FFF;
 $checkbox-check-margin: 0 $grid-unit * 2 0 0;
 $checkbox-checked-bg: $brand-accent;
-$checkbox-shadow: $panel-shadow
+$checkbox-shadow: $panel-shadow;
+
+/* Tooltip */
+$tooltip-bg: $brand-accent;
+$tooltip-color: $bg-color;
+$tooltip-padding: $grid-unit / 2 $grid-unit;
+$tooltip-shadow: $panel-shadow;
+$tooltip-highlight-color: $tooltip-bg