Added dyanmic position adjustment

Added tooltips for dropdown items

Reverted pretty much everything in favour of a DOM approach

Simplified JS

app/assets/javascripts/pipelines.js.es6

@@ -4,17 +4,6 @@
     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() {

app/assets/stylesheets/pages/pipelines.scss

@@ -360,10 +360,6 @@
 
     &:hover {
       background-color: $gray-lighter;
-
-      .dropdown-menu-toggle {
-        background-color: transparent;
-      }
     }
 
     &.playable {
@@ -393,6 +389,15 @@
         }
       }
 
+      .tooltip {
+        white-space: nowrap;
+
+        .tooltip-inner {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
       .ci-status-text {
         width: 135px;
         white-space: nowrap;
@@ -410,6 +415,7 @@
       }
 
       .dropdown-menu-toggle {
+        background-color: transparent;
         border: none;
         width: auto;
         padding: 0;

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', show_tooltip: true)
+  def render_status_with_link(type, status, path = nil, tooltip_placement: 'auto left', cssclass: '', container: 'body')
     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 } if show_tooltip
+    data = { toggle: 'tooltip', placement: tooltip_placement, container: container }
 
     if path
       link_to ci_icon_for_status(status), path,

app/views/projects/ci/builds/_build_pipeline.html.haml

 - is_playable = subject.playable? && can?(current_user, :update_build, @project)
 - if is_playable
-  = link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, title: 'Play' do
+  = link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, data: { toggle: 'tooltip', title: "#{subject.name} - play", container: '.pipeline-graph', placement: 'bottom' } do
     = render_status_with_link('build', 'play')
     .ci-status-text= subject.name
 - elsif can?(current_user, :read_build, @project)
-  = link_to namespace_project_build_path(subject.project.namespace, subject.project, subject) do
+  = link_to namespace_project_build_path(subject.project.namespace, subject.project, subject), data: { toggle: 'tooltip', title: "#{subject.name} - #{subject.status}", container: '.pipeline-graph', placement: 'bottom' } do
     %span.ci-status-icon
       = render_status_with_link('build', subject.status)
     .ci-status-text= subject.name

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{ { data: { toggle: 'tooltip', title: "#{group_name} - #{status.status}", placement: 'bottom' } } }
+      .build-content
         = render "projects/#{status.to_partial_path}_pipeline", subject: status
   - else
     %li.build

app/views/projects/commit/_pipeline_status_group.html.haml

 - group_status = CommitStatus.where(id: subject).status
-%button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
+%button.dropdown-menu-toggle.has-tooltip{ type: 'button', data: { toggle: 'dropdown', title: "#{name} - #{group_status}" } }
   %span.ci-status-icon
     = render_status_with_link('build', group_status)
   %span.ci-status-text

app/views/projects/generic_commit_statuses/_generic_commit_status_pipeline.html.haml

-- if subject.target_url
-  = link_to subject.target_url do
+%a{ data: { toggle: 'tooltip', title: "#{subject.name} - #{subject.status}", container: '.pipeline-graph', placement: 'bottom' } }
+  - if subject.target_url
+    = link_to subject.target_url do
+      %span.ci-status-icon
+        = render_status_with_link('commit status', subject.status)
+      %span.ci-status-text= subject.name
+  - else
     %span.ci-status-icon
       = render_status_with_link('commit status', subject.status)
     %span.ci-status-text= subject.name
-- else
-  %span.ci-status-icon
-    = render_status_with_link('commit status', subject.status)
-  %span.ci-status-text= subject.name