diff --git a/src/styles/colors.less b/src/styles/colors.less
index d2e2395..6cd04c6 100644
--- a/src/styles/colors.less
+++ b/src/styles/colors.less
@@ -27,4 +27,4 @@
 @mobile_breakpoint: 768px;
 @micro_breakpoint: 390px;
 
-@tooltip_backgroud: #123740;
+@tooltip_background: #123740;
diff --git a/src/styles/panel.less b/src/styles/panel.less
index 522b95c..33018c7 100644
--- a/src/styles/panel.less
+++ b/src/styles/panel.less
@@ -147,13 +147,13 @@
   position: absolute;
   bottom: 58px;
   left: 50%;
-  background: @tooltip_backgroud;
+  background: @tooltip_background;
   padding: 10px;
-  transform: translateX(-50%);
+  transform: translate(-50%, -10px);
   border-radius: @panel_radius;
   opacity: 0;
   pointer-events: none;
-  transition: opacity 250ms;
+  transition: all 250ms;
   font-size: 13px;
   color: white;
 
@@ -162,7 +162,7 @@
     width: 10px;
     height: 10px;
     position: absolute;
-    background: @tooltip_backgroud;
+    background: @tooltip_background;
     bottom: 0;
     transform: translate(-50%, 5px) rotate(45deg);
     left: 50%;
@@ -171,6 +171,7 @@
   &.top {
     bottom: auto;
     top: 43px;
+    transform: translate(-50%, 10px);
 
     &::after {
       bottom: auto;
@@ -185,6 +186,7 @@
 
   &:hover .panel-tooltip {
     opacity: 1;
+    transform: translate(-50%, 0);
   }
 }