diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx index 71cd59602..a2a1dd4a1 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 6deef5981..4bfcb68c0 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -253,7 +253,7 @@ const Tooltip = ({ mouseHandler, "mousemove", true, - followMouse && isOpen, + followMouse, ); // Handle adjusting the position of the tooltip so that it remains on screen. @@ -307,6 +307,18 @@ const Tooltip = ({ openPortal(); }; + const handleFocus = () => { + if (followMouse) { + if (wrapperRef.current) { + // set initial position for the tooltip + setPositionStyle( + getPositionStyle(adjustedPosition, wrapperRef.current) + ); + } + } + openPortal(); +} + const delayedOpenPortal: MouseEventHandler = useCallback(() => { if (isOpen) { return; @@ -325,7 +337,7 @@ const Tooltip = ({ className={className} onBlur={handleBlur} onClick={handleClick} - onFocus={openPortal} + onFocus={handleFocus} onMouseOut={handleBlur} onMouseOver={delayedOpenPortal} >