Add left and right placement of tooltips

mesosphere · Mar 11, 2016 · aa19451 · aa19451
1 parent 21b3013
commit aa19451
Showing 1 changed file with 30 additions and 1 deletion.
diff --git a/src/css/components/app-modal.less b/src/css/components/app-modal.less
@@ -51,15 +51,44 @@
     .json-editor {
       height: 100%;
       .tooltip-container {
-        position: absolute;
         z-index: 1;
         right: @base-spacing-unit*0.5;
         top: @base-spacing-unit*0.5;
+        position: absolute;
       }
       .icon.help {
         background-image: url("img/icons/icon-help.svg");
       }
     }
+    .tooltip-container {
+      .right, .left {
+        .content{
+          top: -@base-spacing-unit*1.5;
+          bottom: auto;
+          transform: translateX(0);
+          left: @base-spacing-unit*3;
+          padding: @base-spacing-unit;
+          border-radius: 3px;
+          &:before {
+            border-top-color: transparent;
+            border-right-color: @bunker;
+            position: absolute;
+            top: @base-spacing-unit / 2;
+            left: -@base-spacing-unit;
+          }
+        }
+      }
+      .left .content{
+        transform: translateX(calc(~"-100% -"@base-spacing-unit*4));
+        &:before {
+          border-top-color: transparent;
+          border-right-color: transparent;
+          border-left-color: @bunker;
+          top: @base-spacing-unit / 2;
+          left: calc(~"100% +"@base-spacing-unit);
+        }
+      }
+    }
 
     .icon.help {
       background-image: url("img/icons/icon-help-inverse.svg");