diff --git a/frontend/less/espo/bootstrap/tooltip.less b/frontend/less/espo/bootstrap/tooltip.less
index 99d60e5680..e04430f742 100644
--- a/frontend/less/espo/bootstrap/tooltip.less
+++ b/frontend/less/espo/bootstrap/tooltip.less
@@ -16,19 +16,19 @@
   .opacity(0);
 
   &.in     { .opacity(@tooltip-opacity); }
-  &.top    { margin-top:  -3px; padding: @tooltip-arrow-width 0; }
-  &.right  { margin-left:  3px; padding: 0 @tooltip-arrow-width; }
-  &.bottom { margin-top:   3px; padding: @tooltip-arrow-width 0; }
-  &.left   { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
+  &.top    { margin-top: var(--minus-3px); padding: @tooltip-arrow-width 0; }
+  &.right  { margin-left:  var(--3px); padding: 0 @tooltip-arrow-width; }
+  &.bottom { margin-top: var(--3px); padding: @tooltip-arrow-width 0; }
+  &.left   { margin-left: var(--minus-3px); padding: 0 @tooltip-arrow-width; }
 }
 
 // Wrapper for the tooltip content
 .tooltip-inner {
-  max-width: @tooltip-max-width;
-  padding: 3px 8px;
-  color: @tooltip-color;
+  max-width: var(--200px);
+  padding: var(--3px) var(--8px);
+  color: var(--dropdown-link-color);
   text-align: center;
-  background-color: @tooltip-bg;
+  background-color: var(--dropdown-bg);
   border-radius: var(--border-radius-small);
 }
 
@@ -45,56 +45,56 @@
   &.top .tooltip-arrow {
     bottom: 0;
     left: 50%;
-    margin-left: -@tooltip-arrow-width;
+    margin-left: @tooltip-arrow-width-negative;
     border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
     border-top-color: @tooltip-arrow-color;
   }
   &.top-left .tooltip-arrow {
     bottom: 0;
     right: @tooltip-arrow-width;
-    margin-bottom: -@tooltip-arrow-width;
+    margin-bottom: @tooltip-arrow-width-negative;
     border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
     border-top-color: @tooltip-arrow-color;
   }
   &.top-right .tooltip-arrow {
     bottom: 0;
     left: @tooltip-arrow-width;
-    margin-bottom: -@tooltip-arrow-width;
+    margin-bottom: @tooltip-arrow-width-negative;
     border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
     border-top-color: @tooltip-arrow-color;
   }
   &.right .tooltip-arrow {
     top: 50%;
     left: 0;
-    margin-top: -@tooltip-arrow-width;
+    margin-top: @tooltip-arrow-width-negative;
     border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
     border-right-color: @tooltip-arrow-color;
   }
   &.left .tooltip-arrow {
     top: 50%;
     right: 0;
-    margin-top: -@tooltip-arrow-width;
+    margin-top: @tooltip-arrow-width-negative;
     border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
     border-left-color: @tooltip-arrow-color;
   }
   &.bottom .tooltip-arrow {
     top: 0;
     left: 50%;
-    margin-left: -@tooltip-arrow-width;
+    margin-left: @tooltip-arrow-width-negative;
     border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
     border-bottom-color: @tooltip-arrow-color;
   }
   &.bottom-left .tooltip-arrow {
     top: 0;
     right: @tooltip-arrow-width;
-    margin-top: -@tooltip-arrow-width;
+    margin-top: @tooltip-arrow-width-negative;
     border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
     border-bottom-color: @tooltip-arrow-color;
   }
   &.bottom-right .tooltip-arrow {
     top: 0;
     left: @tooltip-arrow-width;
-    margin-top: -@tooltip-arrow-width;
+    margin-top: @tooltip-arrow-width-negative;
     border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
     border-bottom-color: @tooltip-arrow-color;
   }
diff --git a/frontend/less/espo/bootstrap/variables.less b/frontend/less/espo/bootstrap/variables.less
index 46fb84bc3f..09e5d01225 100644
--- a/frontend/less/espo/bootstrap/variables.less
+++ b/frontend/less/espo/bootstrap/variables.less
@@ -156,35 +156,14 @@
 @nav-tabs-active-link-hover-color:          @gray;
 @nav-tabs-justified-active-link-border-color:     @body-bg;
 
-@state-success-text:             #3c763d;
-@state-success-bg:               #dff0d8;
 
-@state-info-text:                #31708f;
-@state-info-bg:                  #d9edf7;
-
-@state-warning-text:             #8a6d3b;
-@state-warning-bg:               #fcf8e3;
-
-@state-danger-text:              #a94442;
-@state-danger-bg:                #f2dede;
+@tooltip-opacity: .9;
+@tooltip-arrow-width: var(--5px);
+@tooltip-arrow-width-negative: var(--minus-5px);
+@tooltip-arrow-color: var(--dropdown-bg);
 
 
-
-
-@tooltip-max-width:           200px;
-
-@tooltip-color:               #fff;
-
-@tooltip-bg:                  #000;
-@tooltip-opacity:             .9;
-
-@tooltip-arrow-width:         5px;
-@tooltip-arrow-color:         @tooltip-bg;
-
-
-//== Popovers
-//
-//##
+// Popovers
 
 //** Popover body background color
 @popover-bg:                          #fff;