diff options
Diffstat (limited to 'app/assets/javascripts/work_items/components/work_item_type_icon.vue')
-rw-r--r-- | app/assets/javascripts/work_items/components/work_item_type_icon.vue | 20 |
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> |