diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index bd9ab385bb9..d5c2b36fa84 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -307,8 +307,8 @@ $tooltipArrowWidth: 5px;
 $tooltipLinkColor: $link-color;
 $graph-tooltip-bg: $dark-1;
 
-$tooltipBackground: $black;
-$tooltipColor: $text-color;
+$tooltipBackground: $dark-1;
+$tooltipColor: white;
 $tooltipArrowColor: $tooltipBackground;
 $tooltipBackgroundError: $brand-danger;
 $tooltipBackgroundBrand: $brand-primary;
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index 59de9617a94..0ba544e2c38 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -312,8 +312,8 @@ $tooltipLinkColor: lighten($popover-help-color, 5%);
 $graph-tooltip-bg: $gray-5;
 
 $tooltipBackground: $popover-help-bg;
-$tooltipBackground: #09090b;
-$tooltipColor: #ececec;
+$tooltipBackground: $gray-1;
+$tooltipColor: $gray-7;
 $tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip
 $tooltipBackgroundError: $brand-danger;
 $tooltipBackgroundBrand: $brand-primary;
diff --git a/public/sass/components/_tooltip.scss b/public/sass/components/_tooltip.scss
index 09252fe4f54..6801f196d59 100644
--- a/public/sass/components/_tooltip.scss
+++ b/public/sass/components/_tooltip.scss
@@ -40,7 +40,8 @@
 // Wrapper for the tooltip content
 .tooltip-inner {
   max-width: 400px;
-  padding: 8px;
+  padding: 8px 16px;
+  padding: 4px 8px;
   color: $tooltipColor;
   text-align: center;
   text-decoration: none;