Only show tooltip on truncate

For the commit only show the tooltip
if the text is truncated.

Changelog: changed

app/assets/javascripts/vue_shared/components/commit.vue

@@ -136,6 +136,9 @@ export default {
     refUrl() {
       return this.commitRef.ref_url || this.commitRef.path;
     },
+    tooltipTitle() {
+      return this.mergeRequestRef ? this.mergeRequestRef.title : this.commitRef.name;
+    },
   },
 };
 </script>
@@ -148,23 +151,14 @@ export default {
         <gl-icon v-else name="branch" />
       </div>
 
-      <gl-link
-        v-if="mergeRequestRef"
-        v-gl-tooltip
-        :href="mergeRequestRef.path"
-        :title="mergeRequestRef.title"
-        class="ref-name"
-        >{{ mergeRequestRef.iid }}</gl-link
-      >
-      <gl-link
-        v-else
-        v-gl-tooltip
-        :href="refUrl"
-        :title="commitRef.name"
-        class="ref-name"
-        data-testid="ref-name"
-        >{{ commitRef.name }}</gl-link
-      >
+      <tooltip-on-truncate :title="tooltipTitle" truncate-target="child" placement="top">
+        <gl-link v-if="mergeRequestRef" :href="mergeRequestRef.path" class="ref-name">
+          {{ mergeRequestRef.iid }}
+        </gl-link>
+        <gl-link v-else :href="refUrl" class="ref-name" data-testid="ref-name">
+          {{ commitRef.name }}
+        </gl-link>
+      </tooltip-on-truncate>
     </template>
     <gl-icon name="commit" class="commit-icon js-commit-icon" />
 

spec/frontend/vue_shared/components/commit_spec.js

@@ -162,8 +162,6 @@ describe('Commit component', () => {
 
       expect(refEl.attributes('href')).toBe(props.commitRef.ref_url);
 
-      expect(refEl.attributes('title')).toBe(props.commitRef.name);
-
       expect(findIcon('branch').exists()).toBe(true);
     });
   });
@@ -195,8 +193,6 @@ describe('Commit component', () => {
 
       expect(refEl.attributes('href')).toBe(props.mergeRequestRef.path);
 
-      expect(refEl.attributes('title')).toBe(props.mergeRequestRef.title);
-
       expect(findIcon('git-merge').exists()).toBe(true);
     });
   });