Add temporary tooltip to relationship icons

app/assets/javascripts/work_items/components/shared/work_item_relationship_icons.vue

 <script>
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { n__, sprintf } from '~/locale';
 import { LINKED_CATEGORIES_MAP, sprintfWorkItem } from '../../constants';
 
@@ -7,6 +7,9 @@ export default {
   components: {
     GlIcon,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     linkedWorkItems: {
       type: Array,
@@ -28,7 +31,7 @@ export default {
         return item.linkType === LINKED_CATEGORIES_MAP.BLOCKS;
       });
     },
-    blockedByAriaLabel() {
+    blockedByLabel() {
       const message = sprintf(
         n__(
           'WorkItem|%{workItemType} is blocked by 1 item',
@@ -39,7 +42,7 @@ export default {
       );
       return sprintfWorkItem(message, this.workItemType);
     },
-    blocksAriaLabel() {
+    blocksLabel() {
       const message = sprintf(
         n__(
           'WorkItem|%{workItemType} blocks 1 item',
@@ -58,17 +61,20 @@ export default {
   <span class="gl-flex gl-gap-3">
     <span
       v-if="itemsBlockedBy.length"
-      :aria-label="blockedByAriaLabel"
+      v-gl-tooltip
+      :title="blockedByLabel"
+      :aria-label="blockedByLabel"
       class="gl-text-sm gl-text-secondary"
       data-testid="relationship-blocked-by-icon"
     >
       <gl-icon name="entity-blocked" class="gl-text-red-500" />
       {{ itemsBlockedBy.length }}
     </span>
-
     <span
       v-if="itemsBlocks.length"
-      :aria-label="blocksAriaLabel"
+      v-gl-tooltip
+      :title="blocksLabel"
+      :aria-label="blocksLabel"
       class="gl-text-sm gl-text-secondary"
       data-testid="relationship-blocks-icon"
     >

spec/frontend/work_items/components/shared/work_item_relationship_icons_spec.js

 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import WorkItemRelationshipIcons from '~/work_items/components/shared/work_item_relationship_icons.vue';
 import { LINKED_CATEGORIES_MAP } from '~/work_items/constants';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 
 import { mockLinkedItems } from '../../mock_data';
 
@@ -9,6 +10,9 @@ describe('WorkItemRelationshipIcons', () => {
 
   const createComponent = () => {
     wrapper = shallowMountExtended(WorkItemRelationshipIcons, {
+      directives: {
+        GlTooltip: createMockDirective('gl-tooltip'),
+      },
       propsData: {
         linkedWorkItems: mockLinkedItems.linkedItems.nodes,
         workItemType: 'Task',
@@ -18,6 +22,7 @@ describe('WorkItemRelationshipIcons', () => {
 
   const findBlockedIcon = () => wrapper.findByTestId('relationship-blocked-by-icon');
   const findBlockingIcon = () => wrapper.findByTestId('relationship-blocks-icon');
+  const findTooltip = (icon) => getBinding(icon.element, 'gl-tooltip');
 
   const blockedItems = mockLinkedItems.linkedItems.nodes.filter(
     (item) => item.linkType === LINKED_CATEGORIES_MAP.IS_BLOCKED_BY,
@@ -58,4 +63,13 @@ describe('WorkItemRelationshipIcons', () => {
     expect(findBlockedIcon().exists()).toBe(true);
     expect(findBlockingIcon().text()).toContain(blockedItems.length.toString());
   });
+
+  it('renders tooltips with correct text', () => {
+    createComponent();
+
+    expect(findTooltip(findBlockingIcon())).toBeDefined();
+    expect(findTooltip(findBlockedIcon())).toBeDefined();
+    expect(findBlockedIcon().attributes('title')).toBe('Task is blocked by 1 item');
+    expect(findBlockingIcon().attributes('title')).toBe('Task blocks 1 item');
+  });
 });