Refactor Tooltip Wrapper (#13845)

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