diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx index 71cd5960..a2a1dd4a 100644 --- a/src/components/Tooltip/Tooltip.test.tsx +++ b/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( @@ -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( + + + , + ); + + 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 () => { diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 6aadefa0..290dceaf 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -275,13 +275,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( @@ -334,6 +328,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; @@ -352,7 +354,7 @@ const Tooltip = ({ className={className} onBlur={handleBlur} onClick={handleClick} - onFocus={openPortal} + onFocus={handleFocus} onMouseOut={handleBlur} onMouseOver={delayedOpenPortal} >