Refactor Tooltip Wrapper (#13845)

frontend/components/forms/FormField/FormField.tsx

@@ -14,7 +14,7 @@ export interface IFormFieldProps {
   label: Array<any> | JSX.Element | string;
   name: string;
   type: string;
-  tooltip?: string;
+  tooltip?: React.ReactNode;
 }
 
 const FormField = ({

frontend/components/forms/UserSettingsForm/UserSettingsForm.jsx

@@ -57,11 +57,14 @@ class UserSettingsForm extends Component {
             hint={renderEmailHint()}
             disabled={!smtpConfigured}
             tooltip={
-              "\
-              Editing your email address requires that SMTP or SES is configured in order to send a validation email.\
-              <br /><br /> \
-              Users with Admin role can configure SMTP in <strong>Settings &gt; Organization settings</strong>.\
-            "
+              <>
+                Editing your email address requires that SMTP or SES is
+                configured in order to send a validation email.
+                <br />
+                <br />
+                Users with Admin role can configure SMTP in{" "}
+                <strong>Settings &gt; Organization settings</strong>.
+              </>
             }
           />
         </div>

frontend/components/forms/fields/Checkbox/Checkbox.tsx

@@ -19,7 +19,7 @@ export interface ICheckboxProps {
   wrapperClassName?: string;
   indeterminate?: boolean;
   parseTarget?: boolean;
-  tooltip?: string;
+  tooltipContent?: React.ReactNode;
   isLeftLabel?: boolean;
 }
 
@@ -35,7 +35,7 @@ const Checkbox = (props: ICheckboxProps) => {
     wrapperClassName,
     indeterminate,
     parseTarget,
-    tooltip,
+    tooltipContent,
     isLeftLabel,
   } = props;
 
@@ -78,9 +78,9 @@ const Checkbox = (props: ICheckboxProps) => {
           type="checkbox"
         />
         <span className={checkBoxTickClass} />
-        {tooltip ? (
+        {tooltipContent ? (
           <span className={`${baseClass}__label-tooltip tooltip`}>
-            <TooltipWrapper tipContent={tooltip}>
+            <TooltipWrapper tipContent={tooltipContent}>
               {children as string}
             </TooltipWrapper>
           </span>

frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx

@@ -45,7 +45,7 @@ class InputFieldWithIcon extends InputField {
         data-has-tooltip={!!tooltip}
       >
         {tooltip && !error ? (
-          <TooltipWrapper position="top" tipContent={tooltip}>
+          <TooltipWrapper position="top-start" tipContent={tooltip}>
             {label}
           </TooltipWrapper>
         ) : (

frontend/components/forms/fields/Radio/Radio.tests.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { noop } from "lodash";
-import { render, screen } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import Radio from "./Radio";
@@ -76,7 +76,7 @@ describe("Radio - component", () => {
     expect(radioComponent).toHaveClass("disabled");
   });
 
-  it("render a tooltip from the tooltip prop", () => {
+  it("render a tooltip from the tooltip prop", async () => {
     render(
       <Radio
         disabled
@@ -88,6 +88,7 @@ describe("Radio - component", () => {
       />
     );
 
+    await fireEvent.mouseEnter(screen.getByText("Radio Label"));
     const tooltip = screen.getByText("A Test Radio Tooltip");
     expect(tooltip).toBeInTheDocument();
   });

frontend/components/forms/fields/Radio/Radio.tsx

@@ -14,7 +14,7 @@ export interface IRadioProps {
   name?: string;
   className?: string;
   disabled?: boolean;
-  tooltip?: string;
+  tooltip?: React.ReactNode;
   testId?: string;
 }