refactor tooltips

app/styles/app/layouts/settings.sass

@@ -122,45 +122,21 @@ $input-main-height: 30px
   display: inline-block
   width: grid-calc(2, 24)
   float: right
+  text-align: center
+
+  a
+    padding: 1em
 
   .icon-delete
     @extend %icon
     @extend .icon-delete
-    display: block
     width: 1.1em
     height: 1.3em
-    margin: .2em auto 0
 
   &:hover
     .icon-delete
       @extend .icon-delete-hover
-    .tooltip
-      display: block
 
-.tooltip
-  display: none
-  position: absolute
-  right: 0
-  left: 0
-  top: -2.7em
-  width: auto
-  margin: auto
-  padding: .2em .8em .3em
-  z-index: 5
-  background-color: #818383
-  border-radius: 4px
-  color: $white
-  white-space: nowrap
-  &:before
-    content: ""
-    position: absolute
-    bottom: -0.3em
-    left: 39%
-    width: 1em
-    height: 1em
-    transform: rotate(45deg)
-    z-index: -1
-    background-color: #818383
 
 .settings-sshkey
   display: block
@@ -227,8 +203,6 @@ $input-main-height: 30px
   &:hover
     .icon-delete
       @extend .icon-delete-hover
-    .tooltip
-      display: block
 
 
 .form--envvar

app/styles/app/modules/switch.sass

@@ -11,7 +11,7 @@
     width: $switch-width
     height: $switch-height
     margin-right: 1em
-    padding: 3px 3px 3px 4px
+    padding: 2px 3px 3px 4px
     vertical-align: middle
     overflow: visible
     background-color: #E2E1E2

app/styles/app/modules/tooltips.sass

@@ -1,42 +1,59 @@
+%tooltip
+  &:hover
+    .tooltip-bubble
+      transform: translateY(0)
+      opacity: 1
 
-$tooltip-grey: #6A6C6D
+  .tooltip-bubble
+    position: absolute
+    top: -3.2em
+    width: auto
+    height: 1.9em
+    margin: auto
+    padding: .2em .8em .3em
+    z-index: 5
+    background-color: #818383
+    border-radius: 4px
+    color: $white
+    text-align: center
+    white-space: nowrap
+
+    transition: all 100ms ease
+    transform: translateY(20%)
+    opacity: 0
+
+    &:before
+      content: ""
+      position: absolute
+      bottom: -0.3em
+      width: 1em
+      height: 1em
+      transform: rotate(45deg)
+      z-index: -1
+      background-color: #818383
 
 .tooltip
-  position: relative
+  @extend %tooltip
-  display: none
+  .tooltip-bubble
-
-.tooltip-inner
-  position: absolute
-  bottom: 0
     right: 0
-  background: $tooltip-grey
+    left: 0
-  color: $white
+    &:before
-  font-size: $font-size-small
+      left: 42%
-  line-height: 18px
-  text-align: center
-  padding: 8px 5px
-  @extend %border-radius-4px
 
-  &:after
+.tooltip--right
-    content: ''
+  @extend %tooltip
-    position: absolute
+  .tooltip-bubble
-    top: 98%
+    right: -0.5em
-    right: 3em
+    &:before
-    width: 0
+      left: 72%
-    height: 0
-    border-top: 13px solid $tooltip-grey
-    border-right: 13px solid transparent
-    border-left: 13px solid transparent
 
-  @media #{$small-only}
+.tooltip--jobs
-    bottom: -2.5em  
+  @extend %tooltip
-
+  display: inline-block
-  @media #{$medium-up}
+  position: relative
-    width: 18rem
+  .tooltip-bubble
-
+    top: -4.5em
-.tooltip-inner
+    left: -2em
-  height: 4.1em
+    height: 3.7em
-  top: -8em
+    &:before
-  left: 4em
+      left: 15%
-  &:after
-    left: 3.7em

app/templates/components/env-var.hbs

@@ -4,10 +4,10 @@
   <input type="pw" value="••••••••••••••••" readonly="readonly">
 </div>
 <div class="env-var-action">
+  <div class="tooltip">
     <a href="#" title="">
       <span class="icon-delete"></span>
-    <p class="tooltip">
-      <span>Delete</span>
-    </p>
     </a>
+    <div class="tooltip-bubble">Delete</div>
+  </div>
 </div>

app/templates/components/jobs-list.hbs

@@ -5,9 +5,9 @@
     <h2 class="build-title">Build Jobs</h2>
   {{else}}
     <h2 class="build-title">Allowed Failures
+      <div class="tooltip--jobs">
         <span class="icon icon--question"></span>
-      <div class="tooltip">
+        <p class="tooltip-bubble">These are jobs you can allow to fail <br> without failing your entire build</p>
-        <p class="tooltip-inner">These are jobs you can allow to fail without failing your entire build</p>
       </div>
     </h2>
   {{/if}}

app/templates/components/ssh-key.hbs

@@ -8,12 +8,12 @@
     <span>e1:b1:83:06:7e:51:6d:5e:e0:e0:60:96:ca:ac:3d:8a</span>
   </div>
   <div class="ssh-key-action">
+    <div class="tooltip">
       <a href="#" title="">
         <span class="icon-delete"></span>
-      <p class="tooltip">
-        <span>Delete</span>
-      </p>
       </a>
+      <div class="tooltip-bubble">Delete</div>
+    </div>
   </div>
 {{else}}
   <div class="ssh-key-name">
@@ -25,11 +25,11 @@
     <span>e1:b1:83:06:7e:51:6d:5e:e0:e0:60:96:ca:ac:3d:8a</span>
   </div>
   <div class="ssh-key-action">
+    <div class="tooltip--right">
       <a href="#" title="">
         <span class="icon-delete-disabled"></span>
-      <p class="tooltip">
-        <span>Default keys cannot be deleted</span>
-      </p>
       </a>
+      <div class="tooltip-bubble">Default keys cannot be deleted</div>
+    </div>
   </div>
 {{/if}}

app/templates/jobs.hbs

@@ -5,9 +5,9 @@
     <h2 class="build-title">Build Jobs</h2>
   {{else}}
     <h2 class="build-title">Allowed Failures
+      <div class="tooltip--jobs">
         <span class="icon icon--question"></span>
-      <div class="tooltip">
+        <p class="tooltip-bubble">These are jobs are allowed to fail, without failing your entire build.</p>
-        <p class="tooltip-inner">These are jobs are allowed to fail, without failing your entire build.</p>
       </div>
     </h2>
   {{/if}}