diff --git a/opentech/apply/funds/templates/funds/includes/status_bar.html b/opentech/apply/funds/templates/funds/includes/status_bar.html
index 14aeb3c74fdccac82a447a13823c1883783aa923..611e662bf38f2c5f3f26600f271f0faff90bfbd5 100644
--- a/opentech/apply/funds/templates/funds/includes/status_bar.html
+++ b/opentech/apply/funds/templates/funds/includes/status_bar.html
@@ -2,10 +2,10 @@
     {# '.status-bar__item--is-complete' needs to be added to each 'complete' step in order for bar to be styled correctly #}
     {% for phase in workflow %}
         <div class="status-bar__item {% if phase == status %}status-bar__item--is-complete{% endif %}">
-                {% if phase == status %}
-                    <svg class="status-bar__icon"><use xlink:href="#tick-alt"></use></svg>
-                {% endif %}
-            <p>{{ phase.name }}</p>
+            <span class="status-bar__tooltip" data-title="{{ phase.name }}" aria-label="{{ phase.name }}"></span>
+            {% if phase == status %}
+                <svg class="status-bar__icon"><use xlink:href="#tick-alt"></use></svg>
+            {% endif %}
         </div>
     {% endfor %}
 </div>
diff --git a/opentech/static_src/src/sass/apply/components/_status-bar.scss b/opentech/static_src/src/sass/apply/components/_status-bar.scss
index 8c2ec3807f5021173e52cfee3f1eef6156e0501c..87378de63454a2575fe9574865939347fe2c4731 100644
--- a/opentech/static_src/src/sass/apply/components/_status-bar.scss
+++ b/opentech/static_src/src/sass/apply/components/_status-bar.scss
@@ -1,7 +1,11 @@
 .status-bar {
     $root: &;
-    display: flex;
-    padding: 30px 10px;
+    display: none;
+    padding: 30px 10px 50px;
+
+    @include media-query(tablet-portrait) {
+        display: flex;
+    }
 
     &__icon {
         position: absolute;
@@ -82,5 +86,74 @@
             }
         }
     }
-}
 
+    &__tooltip {
+        // tooltip hover area - not visibile
+        position: absolute;
+        top: -10px;
+        z-index: 100;
+        width: 20px;
+        height: 20px;
+        opacity: 0;
+        transition: opacity $transition;
+
+        .status-bar__item:first-of-type & {
+            left: -10px;
+        }
+
+        .status-bar__item--is-complete + .status-bar__item:not(.status-bar__item--is-complete) & {
+            opacity: 1;
+        }
+
+        // triangle
+        &::before {
+            @include triangle(top, $color--error, 5px);
+            position: absolute;
+            bottom: -10px;
+            left: 5px;
+
+            .status-bar__item--is-complete & {
+                @include triangle(top, $color--primary, 5px);
+            }
+        }
+
+        // tooltip contents
+        &::after {
+            position: absolute;
+            top: 30px;
+            left: -25px;
+            display: block;
+            padding: 5px 10px;
+            font-size: 12px;
+            font-weight: $weight--semibold;
+            background-color: $color--error;
+            content: attr(data-title);
+
+            // prevent first tooltip hitting viewport edge
+            .status-bar__item:first-of-type & {
+                left: 0;
+
+                @include media-query(desktop) {
+                    left: -25px;
+                }
+            }
+
+            // prevent last tooltip hitting viewport edge
+            .status-bar__item:last-of-type & {
+                left: -45px;
+
+                @include media-query(desktop) {
+                    left: -25px;
+                }
+            }
+
+            .status-bar__item--is-complete & {
+                background-color: $color--primary;
+            }
+        }
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+}