From 778bfbab59603a4d215ced8a4df403f823dfdbeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Moya?= <andres.moya@kaleidos.net>
Date: Mon, 15 Jun 2020 11:43:23 +0200
Subject: [PATCH] :bug: Fix tooltips of alignment options

---
 .../resources/styles/common/framework.scss    | 33 ++++++++++---------
 .../main/ui/workspace/sidebar/align.cljs      |  4 +--
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss
index 26b5f8bea..3a11c3717 100644
--- a/frontend/resources/styles/common/framework.scss
+++ b/frontend/resources/styles/common/framework.scss
@@ -927,7 +927,6 @@ input[type=range]:focus::-ms-fill-upper {
   position: relative;
 
   &:hover {
-
     &::after {
       background-color: $color-white;
       border-radius: $br-small;
@@ -944,52 +943,56 @@ input[type=range]:focus::-ms-fill-upper {
       z-index: 20;
       @include animation(.3s,.6s,fadeIn);
     }
-
   }
 
   &.tooltip-bottom {
-
     &:hover {
-
       &::after {
         left: -100%;
         top: 130%;
       }
-
     }
+  }
 
+  &.tooltip-bottom-right {
+    &:hover {
+      &::after {
+        left: 0;
+        top: 130%;
+      }
+    }
+  }
+
+  &.tooltip-bottom-left {
+    &:hover {
+      &::after {
+        left: unset;
+        right: 0;
+        top: 130%;
+      }
+    }
   }
 
   &.tooltip-top {
-
     &:hover {
-
       &::after {
         top: -165%;
         left: -60%;
       }
-
     }
-
   }
 
  &.tooltip-right {
-
     &:hover {
-
       &::after {
         top: 15%;
         left: 120%;
       }
-
     }
-
   }
 
   &.tooltip-hover {
-
     &:hover {
-
       &::after {
         align-items: center;
         background-color: $color-white;
diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/align.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/align.cljs
index 4b8c49f62..4748f4ee2 100644
--- a/frontend/src/uxbox/main/ui/workspace/sidebar/align.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/sidebar/align.cljs
@@ -43,7 +43,7 @@
 
     [:div.align-options
      [:div.align-group
-       [:div.align-button.tooltip.tooltip-bottom
+       [:div.align-button.tooltip.tooltip-bottom-right
         {:alt (t locale "workspace.align.hleft")
          :class (when disabled "disabled")
          :on-click #(on-align-button-clicked :hleft)}
@@ -86,7 +86,7 @@
          :on-click #(on-align-button-clicked :vbottom)}
         i/shape-valign-bottom]
 
-       [:div.align-button.tooltip.tooltip-bottom
+       [:div.align-button.tooltip.tooltip-bottom-left
         {:alt (t locale "workspace.align.vdistribute")
          :class (when disabled-distribute "disabled")
          :on-click #(on-distribute-button-clicked :vertical)}