Merge branch '273739-pipeline-tooltips-cover-the-entire-element' into 'master'

Resolve "pipeline tooltips cover the entire element"

See merge request gitlab-org/gitlab!46866

app/assets/javascripts/pipelines/components/graph/job_item.vue

@@ -132,24 +132,26 @@ export default {
   <div class="ci-job-component" data-qa-selector="job_item_container">
     <gl-link
       v-if="status.has_details"
-      v-gl-tooltip="{ boundary, placement: 'bottom' }"
+      v-gl-tooltip="{ boundary, placement: 'bottom', customClass: 'gl-pointer-events-none' }"
       :href="status.details_path"
       :title="tooltipText"
       :class="jobClasses"
       class="js-pipeline-graph-job-link qa-job-link menu-item"
       data-testid="job-with-link"
       @click.stop="hideTooltips"
+      @mouseout="hideTooltips"
     >
       <job-name-component :name="job.name" :status="job.status" />
     </gl-link>
 
     <div
       v-else
-      v-gl-tooltip="{ boundary, placement: 'bottom' }"
+      v-gl-tooltip="{ boundary, placement: 'bottom', customClass: 'gl-pointer-events-none' }"
       :title="tooltipText"
       :class="jobClasses"
       class="js-job-component-tooltip non-details-job-component"
       data-testid="job-without-link"
+      @mouseout="hideTooltips"
     >
       <job-name-component :name="job.name" :status="job.status" />
     </div>

app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue

@@ -337,7 +337,7 @@ export default {
         :message="emptyTabMessage"
       />
 
-      <div v-else-if="stateToRender === $options.stateMap.tableList" class="table-holder">
+      <div v-else-if="stateToRender === $options.stateMap.tableList">
         <pipelines-table-component
           :pipelines="state.pipelines"
           :pipeline-schedule-url="pipelineScheduleUrl"

changelogs/unreleased/273739-pipeline-tooltips-cover-the-entire-element.yml

+---
+title: Better-behaved tooltips in pipeline dropdown
+merge_request: 46866
+author:
+type: fixed

spec/frontend/pipelines/pipelines_spec.js

@@ -372,7 +372,6 @@ describe('Pipelines', () => {
       });
 
       it('should render table', () => {
-        expect(wrapper.find('.table-holder').exists()).toBe(true);
         expect(wrapper.findAll('.gl-responsive-table-row')).toHaveLength(
           pipelines.pipelines.length + 1,
         );