1 files changed, 18 insertions, 2 deletions
diff --git a/app/assets/javascripts/work_items/components/work_item_type_icon.vue b/app/assets/javascripts/work_items/components/work_item_type_icon.vue
index fd914fa350b..31e75663055 100644
--- a/app/assets/javascripts/work_items/components/work_item_type_icon.vue
+++ b/app/assets/javascripts/work_items/components/work_item_type_icon.vue
@@ -1,11 +1,14 @@
 <script>
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { WORK_ITEMS_TYPE_MAP } from '../constants';
 
 export default {
   components: {
     GlIcon,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     workItemType: {
       type: String,
@@ -22,6 +25,11 @@ export default {
       required: false,
       default: '',
     },
+    showTooltipOnHover: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     iconName() {
@@ -32,13 +40,21 @@ export default {
     workItemTypeName() {
       return WORK_ITEMS_TYPE_MAP[this.workItemType]?.name;
     },
+    workItemTooltipTitle() {
+      return this.showTooltipOnHover ? this.workItemTypeName : '';
+    },
   },
 };
 </script>
 
 <template>
   <span>
-    <gl-icon :name="iconName" class="gl-mr-2" />
+    <gl-icon
+      v-gl-tooltip.hover="showTooltipOnHover"
+      :name="iconName"
+      :title="workItemTooltipTitle"
+      class="gl-mr-2 gl-text-gray-500"
+    />
     <span v-if="workItemTypeName" :class="{ 'gl-sr-only': !showText }">{{ workItemTypeName }}</span>
   </span>
 </template>