diff --git a/assets/styles/imports/_tooltip.scss b/assets/styles/imports/_tooltip.scss
index fa6c38668..e3032cb56 100644
--- a/assets/styles/imports/_tooltip.scss
+++ b/assets/styles/imports/_tooltip.scss
@@ -1,4 +1,7 @@
 @mixin arrow($size, $type, $color) {
+
+  --#{$type}-arrow-size: $size;
+
   .#{$type}-arrow {
     width: 0;
     height: 0;
@@ -18,7 +21,7 @@
       border-right-color: transparent !important;
       border-bottom-color: transparent !important;
       bottom: -$size;
-      left: calc(50% - $size);
+      left: calc(50% - var(--#{$type}-arrow-size));
       margin-top: 0;
       margin-bottom: 0;
     }
@@ -33,7 +36,7 @@
       border-right-color: transparent !important;
       border-top-color: transparent !important;
       top: -$size;
-      left: calc(50% - $size);
+      left: calc(50% - var(--#{$type}-arrow-size));
       margin-top: 0;
       margin-bottom: 0;
     }
@@ -48,7 +51,7 @@
       border-top-color: transparent !important;
       border-bottom-color: transparent !important;
       left: -$size;
-      top: calc(50% - $size);
+      top: calc(50% - var(--#{$type}-arrow-size));
       margin-left: 0;
       margin-right: 0;
     }
@@ -63,7 +66,7 @@
       border-right-color: transparent !important;
       border-bottom-color: transparent !important;
       right: -$size;
-      top: calc(50% - $size);
+      top: calc(50% - var(--#{$type}-arrow-size));
       margin-left: 0;
       margin-right: 0;
     }