fix(tooltip): set initial position for follow mouse mode

fix(tooltip): listen to mousemove event also for closed tooltip

test(tooltip): add visibility tests for followMouse case

test(tooltip): remove unnecessary followMouse flag from test

fix(tooltip): pr changes

Author: bmichalowski

src/components/Tooltip/Tooltip.test.tsx

@@ -165,7 +165,7 @@ describe("Tooltip", () => {
     expect(screen.queryByTestId("tooltip-portal")).not.toBeInTheDocument();
   });
 
-  it("renders tooltip message on focus", async () => {
+  it("shows tooltip message on focus", async () => {
     render(
       <Tooltip message="tooltip text">
         <button>open the tooltip</button>
@@ -177,8 +177,24 @@ describe("Tooltip", () => {
     await act(async () => {
       await userEventWithTimers.tab();
     });
-    expect(screen.getByTestId("tooltip-portal")).toBeInTheDocument();
-    expect(screen.getByText("tooltip text")).toBeInTheDocument();
+    expect(screen.getByTestId("tooltip-portal")).toBeVisible();
+    expect(screen.getByText("tooltip text")).toBeVisible();
+  });
+
+  it("shows tooltip message on focus, with followMouse active", async () => {
+    render(
+      <Tooltip message="tooltip text" followMouse>
+        <button>open the tooltip</button>
+      </Tooltip>,
+    );
+
+    expect(screen.queryByTestId("tooltip-portal")).not.toBeInTheDocument();
+    expect(screen.queryByText("tooltip text")).not.toBeInTheDocument();
+    await act(async () => {
+      await userEventWithTimers.tab();
+    });
+    expect(screen.getByTestId("tooltip-portal")).toBeVisible();
+    expect(screen.getByText("tooltip text")).toBeVisible();
   });
 
   it("updates the tooltip to fit on the screen", async () => {

src/components/Tooltip/Tooltip.tsx

@@ -248,13 +248,7 @@ const Tooltip = ({
   );
 
   // Handle mouse events.
-  useListener(
-    wrapperRef.current,
-    mouseHandler,
-    "mousemove",
-    true,
-    followMouse && isOpen,
-  );
+  useListener(wrapperRef.current, mouseHandler, "mousemove", true, followMouse);
 
   // Handle adjusting the position of the tooltip so that it remains on screen.
   useWindowFitment(
@@ -307,6 +301,14 @@ const Tooltip = ({
     openPortal();
   };
 
+  const handleFocus = () => {
+    if (followMouse && wrapperRef.current) {
+      // set initial position for the tooltip
+      setPositionStyle(getPositionStyle(adjustedPosition, wrapperRef.current));
+    }
+    openPortal();
+  };
+
   const delayedOpenPortal: MouseEventHandler = useCallback(() => {
     if (isOpen) {
       return;
@@ -325,7 +327,7 @@ const Tooltip = ({
           className={className}
           onBlur={handleBlur}
           onClick={handleClick}
-          onFocus={openPortal}
+          onFocus={handleFocus}
           onMouseOut={handleBlur}
           onMouseOver={delayedOpenPortal}
         >