add title in input fields

Author: Amit Kumar

packages/react-vanilla-components/src/components/CheckBox.tsx

@@ -54,6 +54,7 @@ const CheckBox = (props: PROPS) => {
             id={`${id}-widget`}
             type='checkbox'
             className={'cmp-adaptiveform-checkbox__widget'}
+            title={props.tooltip || ''}
             onChange={handleChange}
             value={value}
             checked={selectedValue === value ? true : false}

packages/react-vanilla-components/src/components/CheckBoxGroup.tsx

@@ -75,6 +75,7 @@ const CheckBoxGroup = (props: PROPS) => {
           className={`cmp-adaptiveform-checkboxgroup__widget ${orientation}`}
           id={`${id}-widget`}
           aria-describedby={syncAriaDescribedBy(id, props.tooltip, props.description, props.errorMessage)}
+          title={props.tooltip || ''}
         >
           {options?.map((item, index: number) => (
             <div className={`cmp-adaptiveform-checkboxgroup-item ${name}`} key={enums![index]}>

packages/react-vanilla-components/src/components/DateInput.tsx

@@ -66,6 +66,7 @@ const DateInput = (props: PROPS) => {
           required={required}
           onChange={changeHandler}
           className={'cmp-adaptiveform-datepicker__widget'}
+          title={props.tooltip || ''}
           aria-label={label?.value}
           readOnly={readOnly}
           placeholder={placeholder}

packages/react-vanilla-components/src/components/DropDown.tsx

@@ -54,7 +54,7 @@ const DropDown = (props: PROPS) => {
           id={`${id}-widget`}
           data-testid='select'
           name={name}
-          title={label?.value}
+          title={props.tooltip || ''}
           className={'cmp-adaptiveform-dropdown__widget'}
           onChange={changeHandler}
           value={selectedValue}

packages/react-vanilla-components/src/components/Email.tsx

@@ -62,6 +62,7 @@ const Email = (props: PROPS) => {
           type="email"
           id={`${id}-widget`}
           className={'cmp-adaptiveform-emailinput__widget'}
+          title={props.tooltip || ''}
           value={value}
           onChange={handleChange}
           onBlur={handleBlur}

packages/react-vanilla-components/src/components/FileUpload.tsx

@@ -169,6 +169,7 @@ const FileUpload = (props: PROPS) => {
             <input
               ref={fileInputField}
               className="cmp-adaptiveform-fileinput__widget"
+              title={props.tooltip || ''}
               id={id}
               type="file"
               name={name}

packages/react-vanilla-components/src/components/NumberField.tsx

@@ -60,6 +60,7 @@ const NumberField = (props: PROPS) => {
           id={`${id}-widget`}
           type='number'
           className={'cmp-adaptiveform-numberinput__widget'}
+          title={props.tooltip || ''}
           value={value}
           onChange={changeHandler}
           required={required}

packages/react-vanilla-components/src/components/RadioButtonGroup.tsx

@@ -56,6 +56,7 @@ const RadioButtonGroup = (props: PROPS) => {
           id={`${id}-widget`}
           role="radiogroup"
           aria-describedby={syncAriaDescribedBy(id, props.tooltip, props.description, props.errorMessage)}
+          title={props.tooltip || ''}
         >
           {options?.map((item, index: number) => (
             <div className="cmp-adaptiveform-radiobutton__option" key={enums![index]}>

packages/react-vanilla-components/src/components/Switch.tsx

@@ -77,6 +77,7 @@ const Switch = (props: PROPS) => {
               <input
                 className="cmp-adaptiveform-switch__widget"
                 type="checkbox"
+                title={props.tooltip || ''}
                 name={name}
                 role="switch"
                 disabled={!enabled}

packages/react-vanilla-components/src/components/TelephoneInput.tsx

@@ -42,6 +42,7 @@ const TelephoneInput = (props: PROPS) => {
           type="tel"
           id={`${id}-widget`}
           className={'cmp-adaptiveform-telephoneinput__widget'}
+          title={props.tooltip || ''}
           value={value || ''}
           onChange={handleChange}
           onBlur={handleBlur}