replace help poup with tooltip

app/styles/app.scss

@@ -53,6 +53,7 @@
 @import "app/modules/search";
 @import "app/modules/dropdown";
 @import "app/modules/tabs";
+@import "app/modules/tooltips";
 
 @import "app/layout";
 @import "app/layouts/dashboard";

app/styles/app/layouts/buildheader.sass

@@ -58,6 +58,8 @@
     margin-top: 2.5rem
     color: $grey1
     font-size: $font-size-sm
+    & span:hover + .tooltip
+      display: block
 
 .repo-main-commit
   position: relative
@@ -147,3 +149,5 @@
 .build-os
   text-transform: capitalize
 
+
+

app/styles/app/modules/icons.sass

@@ -96,6 +96,7 @@
   background-image: inline-image('svg/icon-job-errored.svg')
 .icon--job.started,
 .icon--job.created,
+.icon--job.received,
 .icon--started-yellow
   background-image: inline-image('svg/icon-job-started.svg')
 

app/styles/app/modules/tiles.sass

@@ -198,6 +198,7 @@
     @media #{$xlarge-up}
       @include grid-column(7)
 
+
 p.tile-single-line
   padding: .7em 0
   .icon--code

app/styles/app/modules/tooltips.sass

@@ -0,0 +1,42 @@
+
+$tooltip-grey: #6A6C6D
+
+.tooltip
+  position: relative
+  display: none
+
+.tooltip-inner
+  position: absolute
+  bottom: 0
+  right: 0
+  background: $tooltip-grey
+  color: $white
+  font-size: $font-size-small
+  line-height: 18px
+  text-align: center
+  padding: 8px 5px
+  @extend %border-radius-4px
+  
+  &:after
+    content: ''
+    position: absolute
+    top: 98%
+    right: 3em
+    width: 0
+    height: 0
+    border-top: 13px solid $tooltip-grey
+    border-right: 13px solid transparent
+    border-left: 13px solid transparent
+
+  @media #{$small-only}
+    bottom: -2.5em  
+
+  @media #{$medium-up}
+    width: 25rem
+
+.tooltip-inner
+  height: 4.1em
+  top: -8em
+  left: 4em
+  &:after
+    left: 4.1em

app/templates/jobs.hbs

@@ -5,9 +5,10 @@
     <h2 class="build-title">Build Jobs</h2>
   {{else}}
     <h2 class="build-title">Allowed Failures
-      <a title="What's this?" class="open-popup" name="help-allowed_failures" {{action "openHelpPopup" target=view}}>
-        <span class="btn button-circle button--help"><span class="icon icon--question"></span></span>
-      </a>
+      <span class="btn button-circle button--help"><span class="icon icon--question"></span></span>
+      <div class="tooltip">
+        <p class="tooltip-inner">These are instances you can allow to fail without failing your entire build</p>
+      </div>
     </h2>
   {{/if}}
 
@@ -52,25 +53,4 @@
       {{job.configKeys}}
     {{/each}}
   </section>
-
-  {{#unless view.required}}
-    <div id="help-allowed_failures" class="popup">
-      <a href="#" class="close" {{action "popupClose" target=view}}></a>
-      <h4></h4>
-      <p>
-        Allowed Failures are items in your build matrix that are allowed to
-        fail without causing the entire build to be shown as failed.
-      </p>
-      <p>
-        You can define allowed failures in the build matrix as follows:
-      </p>
-      <pre>matrix:
-  allow_failures:
-    - rvm: ruby-head</pre>
-      <p>
-        This lets you add in experimental and preparatory builds to test against versions or
-        configurations that you are not ready to officially support.
-      </p>
-    </div>
-  {{/unless}}
 {{/if}}