Added tooltip with jobs full name to build items in graph

Added status to build tooltip and removed status icon tooltip

Added Pipelines class to force tooltips ontop of the dropdown, we cannot do this with data attributes because dropdown toggle is already set

Corrected dispatcher invocation

3 files changed, 14 insertions, 3 deletions

diff --git a/app/assets/javascripts/pipelines.js.es6 b/app/assets/javascripts/pipelines.js.es6
index a7624de6089..dd320c52e44 100644
--- a/app/assets/javascripts/pipelines.js.es6
+++ b/app/assets/javascripts/pipelines.js.es6
@@ -4,6 +4,17 @@
     constructor() {
       $(document).off('click', '.toggle-pipeline-btn').on('click', '.toggle-pipeline-btn', this.toggleGraph);
       this.addMarginToBuildColumns();
+      this.initGroupedPipelineTooltips();
+    }
+
+    initGroupedPipelineTooltips() {
+      $('.dropdown-menu-toggle', $('.grouped-pipeline-dropdown').parent()).each(function() {
+        const $this = $(this);
+        $this.tooltip({
+          title: $this.data('tooltip-title'),
+          placement: 'bottom'
+        });
+      });
     }
 
     toggleGraph() {
diff --git a/app/helpers/ci_status_helper.rb b/app/helpers/ci_status_helper.rb
index b7f48630bd4..0e727f3dcf0 100644
--- a/app/helpers/ci_status_helper.rb
+++ b/app/helpers/ci_status_helper.rb
@@ -71,10 +71,10 @@ module CiStatusHelper
       Ci::Runner.shared.blank?
   end
 
-  def render_status_with_link(type, status, path = nil, tooltip_placement: 'auto left', cssclass: '', container: 'body')
+  def render_status_with_link(type, status, path = nil, tooltip_placement: 'auto left', cssclass: '', container: 'body', show_tooltip: true)
     klass = "ci-status-link ci-status-icon-#{status.dasherize} #{cssclass}"
     title = "#{type.titleize}: #{ci_label_for_status(status)}"
-    data = { toggle: 'tooltip', placement: tooltip_placement, container: container }
+    data = { toggle: 'tooltip', placement: tooltip_placement, container: container } if show_tooltip
 
     if path
       link_to ci_icon_for_status(status), path,
diff --git a/app/views/projects/commit/_pipeline_stage.html.haml b/app/views/projects/commit/_pipeline_stage.html.haml
index 289aa5178b1..993fc89d23d 100644
--- a/app/views/projects/commit/_pipeline_stage.html.haml
+++ b/app/views/projects/commit/_pipeline_stage.html.haml
@@ -5,7 +5,7 @@
     - is_playable = status.playable? && can?(current_user, :update_build, @project)
     %li.build{ class: ("playable" if is_playable) }
       .curve
-      .build-content
+      .build-content{ { data: { toggle: 'tooltip', title: "#{group_name} - #{status.status}", placement: 'bottom' } } }
         = render "projects/#{status.to_partial_path}_pipeline", subject: status
   - else
     %li.build