diff --git a/packages/react-vanilla-components/src/components/CheckBox.tsx b/packages/react-vanilla-components/src/components/CheckBox.tsx
index 956c8624..665085ea 100644
--- a/packages/react-vanilla-components/src/components/CheckBox.tsx
+++ b/packages/react-vanilla-components/src/components/CheckBox.tsx
@@ -54,7 +54,7 @@ const CheckBox = (props: PROPS) => {
             id={`${id}-widget`}
             type='checkbox'
             className={'cmp-adaptiveform-checkbox__widget'}
-            title={props.tooltip || ''}
+            title={props.tooltipText || ''}
             onChange={handleChange}
             value={value}
             checked={selectedValue === value ? true : false}
diff --git a/packages/react-vanilla-components/src/components/CheckBoxGroup.tsx b/packages/react-vanilla-components/src/components/CheckBoxGroup.tsx
index b3957b3c..cc4042d3 100644
--- a/packages/react-vanilla-components/src/components/CheckBoxGroup.tsx
+++ b/packages/react-vanilla-components/src/components/CheckBoxGroup.tsx
@@ -75,7 +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 || ''}
+          title={props.tooltipText || ''}
         >
           {options?.map((item, index: number) => (
             <div className={`cmp-adaptiveform-checkboxgroup-item ${name}`} key={enums![index]}>
diff --git a/packages/react-vanilla-components/src/components/DateInput.tsx b/packages/react-vanilla-components/src/components/DateInput.tsx
index 356c05ca..4c9f3dd3 100644
--- a/packages/react-vanilla-components/src/components/DateInput.tsx
+++ b/packages/react-vanilla-components/src/components/DateInput.tsx
@@ -66,7 +66,7 @@ const DateInput = (props: PROPS) => {
           required={required}
           onChange={changeHandler}
           className={'cmp-adaptiveform-datepicker__widget'}
-          title={props.tooltip || ''}
+          title={props.tooltipText || ''}
           aria-label={label?.value}
           readOnly={readOnly}
           placeholder={placeholder}
diff --git a/packages/react-vanilla-components/src/components/DropDown.tsx b/packages/react-vanilla-components/src/components/DropDown.tsx
index 1bb293ed..11e597be 100644
--- a/packages/react-vanilla-components/src/components/DropDown.tsx
+++ b/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={props.tooltip || ''}
+          title={props.tooltipText || ''}
           className={'cmp-adaptiveform-dropdown__widget'}
           onChange={changeHandler}
           value={selectedValue}
diff --git a/packages/react-vanilla-components/src/components/Email.tsx b/packages/react-vanilla-components/src/components/Email.tsx
index 2ca6fd15..dc9d2ba7 100644
--- a/packages/react-vanilla-components/src/components/Email.tsx
+++ b/packages/react-vanilla-components/src/components/Email.tsx
@@ -62,7 +62,7 @@ const Email = (props: PROPS) => {
           type="email"
           id={`${id}-widget`}
           className={'cmp-adaptiveform-emailinput__widget'}
-          title={props.tooltip || ''}
+          title={props.tooltipText || ''}
           value={value}
           onChange={handleChange}
           onBlur={handleBlur}
diff --git a/packages/react-vanilla-components/src/components/FileUpload.tsx b/packages/react-vanilla-components/src/components/FileUpload.tsx
index e96ff41d..0ccaf0cd 100644
--- a/packages/react-vanilla-components/src/components/FileUpload.tsx
+++ b/packages/react-vanilla-components/src/components/FileUpload.tsx
@@ -169,7 +169,7 @@ const FileUpload = (props: PROPS) => {
             <input
               ref={fileInputField}
               className="cmp-adaptiveform-fileinput__widget"
-              title={props.tooltip || ''}
+              title={props.tooltipText || ''}
               id={id}
               type="file"
               name={name}
diff --git a/packages/react-vanilla-components/src/components/NumberField.tsx b/packages/react-vanilla-components/src/components/NumberField.tsx
index 3c670c13..96e0ce87 100644
--- a/packages/react-vanilla-components/src/components/NumberField.tsx
+++ b/packages/react-vanilla-components/src/components/NumberField.tsx
@@ -60,7 +60,7 @@ const NumberField = (props: PROPS) => {
           id={`${id}-widget`}
           type='number'
           className={'cmp-adaptiveform-numberinput__widget'}
-          title={props.tooltip || ''}
+          title={props.tooltipText || ''}
           value={value}
           onChange={changeHandler}
           required={required}
diff --git a/packages/react-vanilla-components/src/components/RadioButtonGroup.tsx b/packages/react-vanilla-components/src/components/RadioButtonGroup.tsx
index 9cefffaf..9943e5a7 100644
--- a/packages/react-vanilla-components/src/components/RadioButtonGroup.tsx
+++ b/packages/react-vanilla-components/src/components/RadioButtonGroup.tsx
@@ -56,7 +56,7 @@ const RadioButtonGroup = (props: PROPS) => {
           id={`${id}-widget`}
           role="radiogroup"
           aria-describedby={syncAriaDescribedBy(id, props.tooltip, props.description, props.errorMessage)}
-          title={props.tooltip || ''}
+          title={props.tooltipText || ''}
         >
           {options?.map((item, index: number) => (
             <div className="cmp-adaptiveform-radiobutton__option" key={enums![index]}>
diff --git a/packages/react-vanilla-components/src/components/Switch.tsx b/packages/react-vanilla-components/src/components/Switch.tsx
index 737886f2..9e26487b 100644
--- a/packages/react-vanilla-components/src/components/Switch.tsx
+++ b/packages/react-vanilla-components/src/components/Switch.tsx
@@ -77,7 +77,7 @@ const Switch = (props: PROPS) => {
               <input
                 className="cmp-adaptiveform-switch__widget"
                 type="checkbox"
-                title={props.tooltip || ''}
+                title={props.tooltipText || ''}
                 name={name}
                 role="switch"
                 disabled={!enabled}
diff --git a/packages/react-vanilla-components/src/components/TelephoneInput.tsx b/packages/react-vanilla-components/src/components/TelephoneInput.tsx
index bfadaf8b..0972c869 100644
--- a/packages/react-vanilla-components/src/components/TelephoneInput.tsx
+++ b/packages/react-vanilla-components/src/components/TelephoneInput.tsx
@@ -42,7 +42,7 @@ const TelephoneInput = (props: PROPS) => {
           type="tel"
           id={`${id}-widget`}
           className={'cmp-adaptiveform-telephoneinput__widget'}
-          title={props.tooltip || ''}
+          title={props.tooltipText || ''}
           value={value || ''}
           onChange={handleChange}
           onBlur={handleBlur}
diff --git a/packages/react-vanilla-components/src/components/TextField.tsx b/packages/react-vanilla-components/src/components/TextField.tsx
index 9c1c2f0a..7720b418 100644
--- a/packages/react-vanilla-components/src/components/TextField.tsx
+++ b/packages/react-vanilla-components/src/components/TextField.tsx
@@ -62,7 +62,7 @@ const TextField = (props: PROPS) => {
           type="text"
           id={`${id}-widget`}
           className={'cmp-adaptiveform-textinput__widget'}
-          title={props.tooltip || ''}
+          title={props.tooltipText || ''}
           value={value || ''}
           onChange={handleChange}
           onBlur={handleBlur}
diff --git a/packages/react-vanilla-components/src/components/TextFieldArea.tsx b/packages/react-vanilla-components/src/components/TextFieldArea.tsx
index b8643085..086d8f46 100644
--- a/packages/react-vanilla-components/src/components/TextFieldArea.tsx
+++ b/packages/react-vanilla-components/src/components/TextFieldArea.tsx
@@ -61,7 +61,7 @@ const TextFieldArea = (props: PROPS) => {
         <textarea
           id={`${id}-widget`}
           className={'cmp-adaptiveform-textinput__widget'}
-          title={props.tooltip || ''}
+          title={props.tooltipText || ''}
           name={name}
           onChange={handleChange}
           value={value}
diff --git a/packages/react-vanilla-components/src/utils/type.tsx b/packages/react-vanilla-components/src/utils/type.tsx
index e711275f..c0182542 100644
--- a/packages/react-vanilla-components/src/utils/type.tsx
+++ b/packages/react-vanilla-components/src/utils/type.tsx
@@ -25,7 +25,8 @@ export type PROPS = State<FieldJson & Handlers & {
   layout?: {
     [key: string]: any;
   },
-  richText?: boolean
+  richText?: boolean,
+  tooltipText?: string
 }>;
 
 export type PROPS_PANEL = State<FieldsetJson> & {
diff --git a/packages/react-vanilla-components/src/utils/withRuleEngine.tsx b/packages/react-vanilla-components/src/utils/withRuleEngine.tsx
index 734b9f9a..677c65c8 100644
--- a/packages/react-vanilla-components/src/utils/withRuleEngine.tsx
+++ b/packages/react-vanilla-components/src/utils/withRuleEngine.tsx
@@ -25,6 +25,10 @@ export const richTextString = (stringMsg = '') => {
   const htmlProp = { __html: sanitizeHTML(stringMsg) };
   return (<span dangerouslySetInnerHTML={htmlProp} />);
 };
+const getPlainTextFromHtml = (html: string = ''): string => {
+  const strippedText = sanitizeHTML(html, { allowedTags: [], allowedAttributes: {} });
+  return strippedText.trim(); 
+};
 const formateErrorMessage = (state: FieldViewState) => {
   const errorMessage = state.errorMessage === '' && state.valid === false ? DEFAULT_ERROR_MESSAGE : state.errorMessage;
   return errorMessage;
@@ -73,6 +77,7 @@ export function withRuleEngine(Component: JSXElementConstructor<any>) {
       description: getLocalizeDescription(i18n, state),
       placeholder: getLocalizePlaceholder(i18n, state),
       tooltip: getToolTip(state),
+      tooltipText: getPlainTextFromHtml(state.tooltip || ''),
       label: {
         ...state?.label,
         value: getLocalizeLabel(i18n, state, state?.label?.richText),
@@ -104,7 +109,8 @@ export function withRuleEnginePanel(Component: JSXElementConstructor<any>) {
         visible: state.label?.visible !== false
       },
       description: getLocalizeDescription(i18n, state),
-      tooltip: getToolTip(state)
+      tooltip: getToolTip(state),
+      tooltipText: getPlainTextFromHtml(state.tooltip || '')
     };
     const visible = typeof state.visible === 'undefined' || state.visible;
     // @ts-ignore