start rewriting tooltips

remove some whitespace

app/routes/dashboard/repositories.js

@@ -12,7 +12,7 @@ export default TravisRoute.extend({
   model() {
     var apiEndpoint;
     apiEndpoint = config.apiEndpoint;
-    return $.ajax(apiEndpoint + '/v3/repos?repository.active=false&include=repository.default_branch,build.commit', {
+    return $.ajax(apiEndpoint + '/v3/repos?repository.active=true&include=repository.default_branch,build.commit', {
       headers: {
         Authorization: 'token ' + this.auth.token()
       }

app/styles/app/layouts/jobs.sass

@@ -53,6 +53,10 @@
       align-items: center
       height: 34px
 
+  &:hover
+    a
+      margin-left: -2px // related to the width given in color jobs
+
 .section-title
   font-size: 16px
   color: $cement-grey

app/styles/app/layouts/requests.sass

@@ -1,6 +1,7 @@
 =requestFadeOut($status, $color)
   @media #{$medium-up}
     &.#{$status}:hover
+      padding-left: 0
       .status-icon.api
         svg
           background-color: $color
@@ -19,8 +20,8 @@
   margin-bottom: 5px
   font-size: 15px
   padding-left: 1em
-  @include colorJobs($turf-green, 'accepted', 6px, rgba($turf-green, .1))
+  @include colorJobs($turf-green, 'accepted', 3px, rgba($turf-green, .1))
-  @include colorJobs($brick-red, 'rejected', 6px, rgba($brick-red, .1))
+  @include colorJobs($brick-red, 'rejected', 3px, rgba($brick-red, .1))
 
   @include requestFadeOut('accepted',#ECF6EF)
   @include requestFadeOut('rejected', #FBECEB)
@@ -36,9 +37,9 @@
   @media #{$medium-up}
     display: flex
     justify-content: space-between
-    flex-flow: row wrap
+    flex-flow: row nowrap
     align-items: center
-    padding: .3em 0
+    padding: .3em 0 .3em 2px
     white-space: nowrap
 
     .row-item:first-of-type

app/styles/app/mixins.sass

@@ -137,5 +137,3 @@
     &:active
       background-color: $hover
       border-left: $width solid $color
-      a
-        margin-left: - $width + 1px

app/styles/app/modules/tooltips.sass

@@ -82,86 +82,39 @@
     &:before
       left: 2.5em
 
-.tooltip-jobs
-  display: inline-block
-  position: relative
-  vertical-align: middle
-  @extend %tooltip
-  .tooltip-bubble
-    top: -3.8em
-    left: -.5em
-    height: 3.2em
-    padding: .3em .4em
-    &:before
-      left: 0.6em
-  .tooltip-trigger
-    vertical-align: baseline
-
-.tooltip.job-os
-  .tooltip-bubble
-    top: -2.2em
-    height: 1.6em
-    padding: 0.1em .4em
-    &:before
-      left: 0
-      right: 0
-      margin: auto
-
-
-.tooltip--requests
-  @extend %tooltip
-  position: absolute
-  right: 0
-  bottom: 0
-  .tooltip-trigger
-    margin: .2em .5em
-  .tooltip-bubble
-    top: -3.6em
-    right: 0
-    width: 10em
-    height: 3em
-    white-space: normal
-    &:before
-      right: .8em
-
 
 // trying to rewrite
 
 $tooltip-spacing: 4em
-$tooltip-arrow-width: 1em
+$tooltip-arrow-width: .8em
   
 [data-tooltip]
   position: relative
-  background-color: pink
+  display: inline-block
+  vertical-align: middle
   &:after
     content: attr(data-tooltip)
-    display: block
+    padding: 0.2em 0.3em
-    position: absolute
-    background: $asphalt-grey
-    padding: 0.5em
     color: white
     border-radius: 2px
     bottom: $tooltip-spacing
-    left: 0
-    right: 0
     white-space: normal
-    margin: auto
     font-size: 12px
   &:before
     content: ""
-    display: block
     width: $tooltip-arrow-width
     height: $tooltip-arrow-width
     transform: rotate(45deg)
-    position: absolute
-    left: 0
-    right: 0
     bottom: $tooltip-spacing - $tooltip-arrow-width
-    margin: auto
-    background-color: $asphalt-grey
 
   &:after,
   &:before
+    display: block
+    position: absolute
+    background: $asphalt-grey
+    left: 0
+    right: 0
+    margin: auto
     display: none
 
   &:hover,
@@ -170,4 +123,20 @@ $tooltip-arrow-width: 1em
     &:before
       display: block
 
+.job-os[data-tooltip]
+  $tooltip-spacing: 3em
+  &:after
+    bottom: $tooltip-spacing
+  &:before
+    bottom: $tooltip-spacing - $tooltip-arrow-width 
 
+
+.request-item
+  [data-tooltip]
+    $tooltip-spacing: 3em
+    width: 7em
+    text-align: center
+    &:after
+      bottom: $tooltip-spacing
+    &:before
+      bottom: $tooltip-spacing - $tooltip-arrow-width 

app/templates/components/branch-row.hbs

@@ -148,7 +148,7 @@
   {{#if getLast5Builds.isLoading}}
     {{loading-indicator center=true}}
   {{else}}
-    {{#each  getLast5Builds.content as |buildTile|}}
+    {{#each getLast5Builds.content as |buildTile|}}
       {{build-tile build=buildTile}}
     {{/each}}
   {{/if}}

app/templates/components/dashboard-row.hbs

@@ -95,11 +95,11 @@
       {{/if}}
     {{else}}
       <div class="dash-button">
-        {{#unless displayActivateLink}}
+        {{#if displayActivateLink}}
           <button type="button" class="activate-repo-button is-active" {{action 'activateRepo'}}>Activate repository</button>
         {{else}}
           <p class="activate-repo-button" data-tooltip="You need admin rights to activate a repository">Actiavte repository</p>
-        {{/unless}}
+        {{/if}}
       </div>
     {{/if}}
     </div>

app/templates/components/jobs-item.hbs

@@ -8,10 +8,9 @@
     <span class="label-align" aria-label="Job number">{{job.number}}</span>
   </div>
 
-  <div class="job-os {{job.config.os}} tooltip">
+  <div class="job-os {{job.config.os}} tooltip" data-tooltip="{{job.config.os}}">
     {{#if job.config.os}}
-      <span class="icon tooltip-trigger" aria-label="Operating System">{{job.config.os}}</span>
+      <span class="icon" aria-label="{{job.config.os}} operating system">{{job.config.os}}</span>
-      <div class="tooltip-bubble" aria-hidden="true">{{job.config.os}}</div>
     {{/if}}
   </div>
 

app/templates/components/jobs-list.hbs

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

app/templates/components/requests-item.hbs

@@ -37,8 +37,7 @@
 </div>
 
 {{#if isGHPages}}
-  <a class="tooltip--requests" href="https://docs.travis-ci.com/user/customizing-the-build/#Whitelisting-or-blacklisting-branches" title="Branch whitelisting - Travis CI Docs">
+  <a class="tooltip" href="https://docs.travis-ci.com/user/customizing-the-build/#Whitelisting-or-blacklisting-branches" title="Branch whitelisting - Travis CI Docs" data-tooltip="Read about branch whitelisting">
-    <span class="icon-question tooltip-trigger" aria-label="Help"></span>
+    <span class="icon-question" aria-label="Help"></span>
-    <span class="tooltip-bubble">Read about branch whitelisting</span>
   </a>
 {{/if}}