From 39795a63faf7bbd3518f6b8b187c1cf5d74d7ce7 Mon Sep 17 00:00:00 2001
From: Vineet Sharma <sharmava05@gmail.com>
Date: Thu, 13 Mar 2025 17:58:32 +0530
Subject: [PATCH 1/6] Change the alignment of the tooltip to right

---
 src/components/inputs/tooltip/tooltip.component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/inputs/tooltip/tooltip.component.tsx b/src/components/inputs/tooltip/tooltip.component.tsx
index 563d1d0f8..bf15b6dfd 100644
--- a/src/components/inputs/tooltip/tooltip.component.tsx
+++ b/src/components/inputs/tooltip/tooltip.component.tsx
@@ -12,7 +12,7 @@ interface TooltipProps {
 const Tooltip: React.FC<TooltipProps> = ({ field }) => {
   const { t } = useTranslation();
   return (
-    <CarbonTooltip align="top" label={t(field.questionInfo)} description={t(field.questionInfo)}>
+    <CarbonTooltip align="right" label={t(field.questionInfo)} description={t(field.questionInfo)}>
       <button className={styles.tooltip} type="button" data-testid={field.id}>
         <Information />
       </button>

From b9c666a5495cbce80fa75256c568486b1d5f97fa Mon Sep 17 00:00:00 2001
From: Vineet Sharma <sharmava05@gmail.com>
Date: Fri, 4 Apr 2025 16:44:21 +0530
Subject: [PATCH 2/6] Make the whole label as tooltip trigger

---
 .../field-label/field-label.component.tsx     | 27 ++++++++++++++++---
 src/components/field-label/field-label.scss   |  9 +++++++
 .../inputs/tooltip/tooltip.component.tsx      | 23 ----------------
 src/components/inputs/tooltip/tooltip.scss    |  8 ------
 4 files changed, 33 insertions(+), 34 deletions(-)
 delete mode 100644 src/components/inputs/tooltip/tooltip.component.tsx
 delete mode 100644 src/components/inputs/tooltip/tooltip.scss

diff --git a/src/components/field-label/field-label.component.tsx b/src/components/field-label/field-label.component.tsx
index 67937389b..561341b68 100644
--- a/src/components/field-label/field-label.component.tsx
+++ b/src/components/field-label/field-label.component.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
+import { Tooltip as CarbonTooltip } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { type FormField } from '../../types';
-import Tooltip from '../inputs/tooltip/tooltip.component';
 
 import styles from './field-label.scss';
+import { Information } from '@carbon/react/icons';
 
 interface FieldLabelProps {
   field: FormField;
@@ -13,7 +14,18 @@ interface FieldLabelProps {
   customLabel?: string;
 }
 
-const FieldLabel: React.FC<FieldLabelProps> = ({ field, customLabel }) => {
+const Tooltip: React.FC<{ field: FormField; children: React.ReactNode }> = ({ field, children }) => {
+  const { t } = useTranslation();
+  return (
+    <CarbonTooltip align="top-left" label={t(field.questionInfo)} defaultOpen>
+      <span className={styles.tooltip}>
+        {children} <Information className={styles.tooltipIcon} />
+      </span>
+    </CarbonTooltip>
+  );
+};
+
+const FieldLabelContent: React.FC<FieldLabelProps> = ({ field, customLabel }) => {
   const { t } = useTranslation();
   const labelText = customLabel || t(field.label);
   return (
@@ -24,9 +36,18 @@ const FieldLabel: React.FC<FieldLabelProps> = ({ field, customLabel }) => {
           *
         </span>
       )}
-      {field.questionInfo && <Tooltip field={field} />}
     </div>
   );
 };
 
+const FieldLabel: React.FC<FieldLabelProps> = ({ field, customLabel }) => {
+  return field?.questionInfo ? (
+    <Tooltip field={field}>
+      <FieldLabelContent field={field} customLabel={customLabel} />
+    </Tooltip>
+  ) : (
+    <FieldLabelContent field={field} customLabel={customLabel} />
+  );
+};
+
 export default FieldLabel;
diff --git a/src/components/field-label/field-label.scss b/src/components/field-label/field-label.scss
index 157ea3521..0b2171dd6 100644
--- a/src/components/field-label/field-label.scss
+++ b/src/components/field-label/field-label.scss
@@ -9,3 +9,12 @@
   display: flex;
   align-items: center;
 }
+
+.tooltip {
+  display: flex;
+  align-items: center;
+}
+
+.tooltipIcon {
+  margin-left: 0.25rem;
+}
diff --git a/src/components/inputs/tooltip/tooltip.component.tsx b/src/components/inputs/tooltip/tooltip.component.tsx
deleted file mode 100644
index bf15b6dfd..000000000
--- a/src/components/inputs/tooltip/tooltip.component.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { Tooltip as CarbonTooltip } from '@carbon/react';
-import { Information } from '@carbon/react/icons';
-import { type FormField } from '../../../types';
-import { useTranslation } from 'react-i18next';
-
-import styles from './tooltip.scss';
-interface TooltipProps {
-  field: FormField;
-}
-
-const Tooltip: React.FC<TooltipProps> = ({ field }) => {
-  const { t } = useTranslation();
-  return (
-    <CarbonTooltip align="right" label={t(field.questionInfo)} description={t(field.questionInfo)}>
-      <button className={styles.tooltip} type="button" data-testid={field.id}>
-        <Information />
-      </button>
-    </CarbonTooltip>
-  );
-};
-
-export default Tooltip;
diff --git a/src/components/inputs/tooltip/tooltip.scss b/src/components/inputs/tooltip/tooltip.scss
deleted file mode 100644
index 4d32220a9..000000000
--- a/src/components/inputs/tooltip/tooltip.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.tooltip {
-  border: none;
-  background-color: #f4f4f4;
-  z-index: 999;
-  margin-bottom: 0.2rem;
-  padding-left: 8px;
-  padding-top: 8px;
-}

From 8d9c3f97f1058ea18fe1120ee7eaecc1922ec37d Mon Sep 17 00:00:00 2001
From: Vineet Sharma <sharmava05@gmail.com>
Date: Fri, 4 Apr 2025 16:59:42 +0530
Subject: [PATCH 3/6] Refactor

---
 .../field-label/field-label.component.tsx      | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/field-label/field-label.component.tsx b/src/components/field-label/field-label.component.tsx
index 561341b68..1c25f8e47 100644
--- a/src/components/field-label/field-label.component.tsx
+++ b/src/components/field-label/field-label.component.tsx
@@ -18,14 +18,16 @@ const Tooltip: React.FC<{ field: FormField; children: React.ReactNode }> = ({ fi
   const { t } = useTranslation();
   return (
     <CarbonTooltip align="top-left" label={t(field.questionInfo)} defaultOpen>
-      <span className={styles.tooltip}>
-        {children} <Information className={styles.tooltipIcon} />
-      </span>
+      {children}
     </CarbonTooltip>
   );
 };
 
-const FieldLabelContent: React.FC<FieldLabelProps> = ({ field, customLabel }) => {
+interface FieldLabelContentProps extends FieldLabelProps {
+  hasTooltip: boolean;
+}
+
+const FieldLabelContent: React.FC<FieldLabelContentProps> = ({ field, customLabel, hasTooltip }) => {
   const { t } = useTranslation();
   const labelText = customLabel || t(field.label);
   return (
@@ -36,17 +38,19 @@ const FieldLabelContent: React.FC<FieldLabelProps> = ({ field, customLabel }) =>
           *
         </span>
       )}
+      {hasTooltip && <Information size={20} aria-hidden="true" className={styles.tooltipIcon} />}
     </div>
   );
 };
 
 const FieldLabel: React.FC<FieldLabelProps> = ({ field, customLabel }) => {
-  return field?.questionInfo ? (
+  const hasTooltip = Boolean(field.questionInfo);
+  return hasTooltip ? (
     <Tooltip field={field}>
-      <FieldLabelContent field={field} customLabel={customLabel} />
+      <FieldLabelContent field={field} customLabel={customLabel} hasTooltip={hasTooltip} />
     </Tooltip>
   ) : (
-    <FieldLabelContent field={field} customLabel={customLabel} />
+    <FieldLabelContent field={field} customLabel={customLabel} hasTooltip={hasTooltip} />
   );
 };
 

From eac67263580413bfc5a0e6d86e77a9841a62a955 Mon Sep 17 00:00:00 2001
From: Vineet Sharma <sharmava05@gmail.com>
Date: Thu, 10 Apr 2025 15:59:22 +0530
Subject: [PATCH 4/6] Fix failing tests

---
 src/components/field-label/field-label.component.tsx | 6 ++++--
 src/form-engine.test.tsx                             | 5 ++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/field-label/field-label.component.tsx b/src/components/field-label/field-label.component.tsx
index 1c25f8e47..652c0d5b5 100644
--- a/src/components/field-label/field-label.component.tsx
+++ b/src/components/field-label/field-label.component.tsx
@@ -31,14 +31,16 @@ const FieldLabelContent: React.FC<FieldLabelContentProps> = ({ field, customLabe
   const { t } = useTranslation();
   const labelText = customLabel || t(field.label);
   return (
-    <div className={styles.questionLabel}>
+    <div className={styles.questionLabel} data-testid={`${field.id}-label`}>
       <span>{labelText}</span>
       {field.isRequired && (
         <span title={t('required', 'Required')} className={styles.required}>
           *
         </span>
       )}
-      {hasTooltip && <Information size={20} aria-hidden="true" className={styles.tooltipIcon} />}
+      {hasTooltip && (
+        <Information size={20} aria-hidden="true" className={styles.tooltipIcon} data-testid="information-icon" />
+      )}
     </div>
   );
 };
diff --git a/src/form-engine.test.tsx b/src/form-engine.test.tsx
index 48e8f307a..a10ad0e3f 100644
--- a/src/form-engine.test.tsx
+++ b/src/form-engine.test.tsx
@@ -255,9 +255,12 @@ describe('Form engine component', () => {
 
       screen.findByRole('textbox', { name: /text question/i });
 
-      const textFieldTooltip = screen.getByTestId('id_text');
+      const textFieldTooltip = screen.getByTestId('id_text-label');
       expect(textFieldTooltip).toBeInTheDocument();
 
+      const informationIcon = screen.getByTestId('information-icon');
+      expect(informationIcon).toBeInTheDocument();
+
       await user.hover(textFieldTooltip);
       await screen.findByText(/sample tooltip info for text/i);
     });

From 79a5fb5765b42b36761a062560ae42b985d9df1c Mon Sep 17 00:00:00 2001
From: Vineet Sharma <sharmava05@gmail.com>
Date: Wed, 16 Apr 2025 21:04:33 +0530
Subject: [PATCH 5/6] Review changes

---
 .../field-label/field-label.component.tsx     | 55 +++++++++----------
 1 file changed, 25 insertions(+), 30 deletions(-)

diff --git a/src/components/field-label/field-label.component.tsx b/src/components/field-label/field-label.component.tsx
index 652c0d5b5..409d9e913 100644
--- a/src/components/field-label/field-label.component.tsx
+++ b/src/components/field-label/field-label.component.tsx
@@ -14,45 +14,40 @@ interface FieldLabelProps {
   customLabel?: string;
 }
 
-const Tooltip: React.FC<{ field: FormField; children: React.ReactNode }> = ({ field, children }) => {
+const TooltipWrapper: React.FC<{ hasTooltip: boolean; field: FormField; children: React.ReactNode }> = ({
+  field,
+  children,
+  hasTooltip,
+}) => {
   const { t } = useTranslation();
-  return (
-    <CarbonTooltip align="top-left" label={t(field.questionInfo)} defaultOpen>
+  return hasTooltip ? (
+    <CarbonTooltip align="top-left" label={t(field.questionInfo)}>
       {children}
     </CarbonTooltip>
+  ) : (
+    <>{children}</>
   );
 };
 
-interface FieldLabelContentProps extends FieldLabelProps {
-  hasTooltip: boolean;
-}
-
-const FieldLabelContent: React.FC<FieldLabelContentProps> = ({ field, customLabel, hasTooltip }) => {
+const FieldLabel: React.FC<FieldLabelProps> = ({ field, customLabel }) => {
   const { t } = useTranslation();
+  const hasTooltip = Boolean(field.questionInfo);
   const labelText = customLabel || t(field.label);
-  return (
-    <div className={styles.questionLabel} data-testid={`${field.id}-label`}>
-      <span>{labelText}</span>
-      {field.isRequired && (
-        <span title={t('required', 'Required')} className={styles.required}>
-          *
-        </span>
-      )}
-      {hasTooltip && (
-        <Information size={20} aria-hidden="true" className={styles.tooltipIcon} data-testid="information-icon" />
-      )}
-    </div>
-  );
-};
 
-const FieldLabel: React.FC<FieldLabelProps> = ({ field, customLabel }) => {
-  const hasTooltip = Boolean(field.questionInfo);
-  return hasTooltip ? (
-    <Tooltip field={field}>
-      <FieldLabelContent field={field} customLabel={customLabel} hasTooltip={hasTooltip} />
-    </Tooltip>
-  ) : (
-    <FieldLabelContent field={field} customLabel={customLabel} hasTooltip={hasTooltip} />
+  return (
+    <TooltipWrapper field={field} hasTooltip={hasTooltip}>
+      <div className={styles.questionLabel} data-testid={`${field.id}-label`}>
+        <span>{labelText}</span>
+        {field.isRequired && (
+          <span title={t('required', 'Required')} className={styles.required}>
+            *
+          </span>
+        )}
+        {hasTooltip && (
+          <Information size={20} aria-hidden="true" className={styles.tooltipIcon} data-testid="information-icon" />
+        )}
+      </div>
+    </TooltipWrapper>
   );
 };
 

From 33838830ba074d503b8377b99dd160cde35df124 Mon Sep 17 00:00:00 2001
From: Vineet Sharma <sharmava05@gmail.com>
Date: Tue, 22 Apr 2025 11:21:18 +0530
Subject: [PATCH 6/6] Fix failing tests

---
 __mocks__/forms/rfe-forms/required-form.json  | 96 +++++++++----------
 .../field-label/field-label.component.tsx     | 46 +++++----
 src/form-engine.test.tsx                      |  2 +-
 3 files changed, 76 insertions(+), 68 deletions(-)

diff --git a/__mocks__/forms/rfe-forms/required-form.json b/__mocks__/forms/rfe-forms/required-form.json
index 9a0222696..5a2e337c9 100644
--- a/__mocks__/forms/rfe-forms/required-form.json
+++ b/__mocks__/forms/rfe-forms/required-form.json
@@ -1,50 +1,50 @@
 {
-    "name": "Required Field tester",
-    "pages": [
-      {
-        "label": "One",
-        "sections": [
-          {
-            "label": "Sec One",
-            "isExpanded": "true",
-            "questions": [
-              {
-                "label": "Text question",
-                "type": "obs",
-                "required": true,
-                "id": "id_text",
-                "questionInfo":"sample tooltip info for text",
-                "questionOptions": {
-                  "rendering": "text",
-                  "concept": "928def39-33c1-4ddb-8430-165db28448c8",
-                  "conceptMappings": [],
-                  "answers": []
-                },
-                "validators": []
+  "name": "Required Field tester",
+  "pages": [
+    {
+      "label": "One",
+      "sections": [
+        {
+          "label": "Sec One",
+          "isExpanded": "true",
+          "questions": [
+            {
+              "label": "Text question",
+              "type": "obs",
+              "required": true,
+              "id": "id_text",
+              "questionInfo": "sample tooltip info for text",
+              "questionOptions": {
+                "rendering": "text",
+                "concept": "928def39-33c1-4ddb-8430-165db28448c8",
+                "conceptMappings": [],
+                "answers": []
               },
-              {
-                "label": "Text question 2",
-                "type": "obs",
-                "required": "true",
-                "id": "id_text2",
-                "questionInfo":"sample tooltip info for text",
-                "questionOptions": {
-                  "rendering": "text",
-                  "concept": "938def39-33c1-4ddb-8430-165db28448c8",
-                  "conceptMappings": [],
-                  "answers": []
-                },
-                "validators": []
-              }
-            ]
-          }
-        ]
-      }
-    ],
-    "processor": "EncounterFormProcessor",
-    "encounterType": "e22e39fd-7db2-45e7-80f1-60fa0d5a4378",
-    "referencedForms": [],
-    "uuid": "1859d9ad-2ed4-48db-96eb-7b0ce0c9903e",
-    "description": "A form containing most fields, to be used for testing purposes",
-    "version": "1.0"
-  }
\ No newline at end of file
+              "validators": []
+            },
+            {
+              "label": "Text question 2",
+              "type": "obs",
+              "required": "true",
+              "id": "id_text2",
+              "questionInfo": "sample tooltip info for text",
+              "questionOptions": {
+                "rendering": "text",
+                "concept": "938def39-33c1-4ddb-8430-165db28448c8",
+                "conceptMappings": [],
+                "answers": []
+              },
+              "validators": []
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "processor": "EncounterFormProcessor",
+  "encounterType": "e22e39fd-7db2-45e7-80f1-60fa0d5a4378",
+  "referencedForms": [],
+  "uuid": "1859d9ad-2ed4-48db-96eb-7b0ce0c9903e",
+  "description": "A form containing most fields, to be used for testing purposes",
+  "version": "1.0"
+}
diff --git a/src/components/field-label/field-label.component.tsx b/src/components/field-label/field-label.component.tsx
index 409d9e913..aa9a73761 100644
--- a/src/components/field-label/field-label.component.tsx
+++ b/src/components/field-label/field-label.component.tsx
@@ -14,14 +14,12 @@ interface FieldLabelProps {
   customLabel?: string;
 }
 
-const TooltipWrapper: React.FC<{ hasTooltip: boolean; field: FormField; children: React.ReactNode }> = ({
-  field,
-  children,
-  hasTooltip,
-}) => {
+const TooltipWrapper: React.FC<{ field: FormField; children: React.ReactNode }> = ({ field, children }) => {
   const { t } = useTranslation();
+  const hasTooltip = Boolean(field.questionInfo);
+
   return hasTooltip ? (
-    <CarbonTooltip align="top-left" label={t(field.questionInfo)}>
+    <CarbonTooltip align="top-start" label={t(field.questionInfo)}>
       {children}
     </CarbonTooltip>
   ) : (
@@ -29,24 +27,34 @@ const TooltipWrapper: React.FC<{ hasTooltip: boolean; field: FormField; children
   );
 };
 
-const FieldLabel: React.FC<FieldLabelProps> = ({ field, customLabel }) => {
+const FieldLabelContent: React.FC<FieldLabelProps> = ({ field, customLabel }) => {
   const { t } = useTranslation();
   const hasTooltip = Boolean(field.questionInfo);
   const labelText = customLabel || t(field.label);
+  return (
+    <div className={styles.questionLabel} data-testid={`${field.id}-label`}>
+      <span>{labelText}</span>
+      {field.isRequired && (
+        <span title={t('required', 'Required')} className={styles.required}>
+          *
+        </span>
+      )}
+      {hasTooltip && (
+        <Information
+          size={20}
+          aria-hidden="true"
+          className={styles.tooltipIcon}
+          data-testid={`${field.id}-information-icon`}
+        />
+      )}
+    </div>
+  );
+};
 
+const FieldLabel: React.FC<FieldLabelProps> = (props) => {
   return (
-    <TooltipWrapper field={field} hasTooltip={hasTooltip}>
-      <div className={styles.questionLabel} data-testid={`${field.id}-label`}>
-        <span>{labelText}</span>
-        {field.isRequired && (
-          <span title={t('required', 'Required')} className={styles.required}>
-            *
-          </span>
-        )}
-        {hasTooltip && (
-          <Information size={20} aria-hidden="true" className={styles.tooltipIcon} data-testid="information-icon" />
-        )}
-      </div>
+    <TooltipWrapper field={props.field}>
+      <FieldLabelContent {...props} />
     </TooltipWrapper>
   );
 };
diff --git a/src/form-engine.test.tsx b/src/form-engine.test.tsx
index a10ad0e3f..b8ff9f033 100644
--- a/src/form-engine.test.tsx
+++ b/src/form-engine.test.tsx
@@ -258,7 +258,7 @@ describe('Form engine component', () => {
       const textFieldTooltip = screen.getByTestId('id_text-label');
       expect(textFieldTooltip).toBeInTheDocument();
 
-      const informationIcon = screen.getByTestId('information-icon');
+      const informationIcon = screen.getByTestId('id_text-information-icon');
       expect(informationIcon).toBeInTheDocument();
 
       await user.hover(textFieldTooltip);