(fix) Make the whole label as tooltip trigger

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,20 +14,46 @@ 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>
+      {children}
+    </CarbonTooltip>
+  );
+};
+
+interface FieldLabelContentProps extends FieldLabelProps {
+  hasTooltip: boolean;
+}
+
+const FieldLabelContent: React.FC<FieldLabelContentProps> = ({ field, customLabel, hasTooltip }) => {
   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>
       )}
-      {field.questionInfo && <Tooltip field={field} />}
+      {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} />
+  );
+};
+
 export default FieldLabel;

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;
+}

src/form-engine.test.tsx

@@ -267,9 +267,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);
     });