From deb3deb0acb13401d6786139cc3ac3bddfc78092 Mon Sep 17 00:00:00 2001
From: eirikhaugstulen <eirik.haugstulen@gmail.com>
Date: Tue, 28 Nov 2023 14:57:27 +0100
Subject: [PATCH] feat: add tooltip on long WL names

---
 .../TemplateSelectorChip.component.js         | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js
index 5ce7331edf..c1fb7db8e0 100644
--- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js
+++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js
@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react';
-import { Chip } from '@dhis2/ui';
+import { Chip, Tooltip } from '@dhis2/ui';
 import { TemplateSelectorChipContent } from './TemplateSelectorChipContent.component';
 import type { WorkingListTemplate } from './workingListsBase.types';
 
@@ -27,16 +27,23 @@ export const TemplateSelectorChip = (props: Props) => {
     ]);
 
     return (
-        <Chip
-            dataTest="workinglist-template-selector-chip"
-            selected={id === currentTemplateId}
-            onClick={selectTemplateHandler}
+        <Tooltip
+            content={name}
+            placement={'top'}
+            openDelay={800}
         >
-            <TemplateSelectorChipContent
-                {...passOnProps}
-                text={name}
-                isSelectedTemplate={id === currentTemplateId}
-            />
-        </Chip>
+            <Chip
+                dataTest="workinglist-template-selector-chip"
+                tabIndex="0"
+                selected={id === currentTemplateId}
+                onClick={selectTemplateHandler}
+            >
+                <TemplateSelectorChipContent
+                    {...passOnProps}
+                    text={name}
+                    isSelectedTemplate={id === currentTemplateId}
+                />
+            </Chip>
+        </Tooltip>
     );
 };