diff --git a/packages/components/src/ui/ariakit-tooltip/index.tsx b/packages/components/src/ui/ariakit-tooltip/index.tsx
index 384ca1142312d0..ee0a2380cd93a5 100644
--- a/packages/components/src/ui/ariakit-tooltip/index.tsx
+++ b/packages/components/src/ui/ariakit-tooltip/index.tsx
@@ -81,6 +81,7 @@ function AriaToolTip( props: ToolTipProps ) {
shortcut={ shortcut }
/>
) }
+ { /* workaround needed until floating-ui/core is updated to ^1.0.2 */ }
) }
diff --git a/packages/components/src/ui/ariakit-tooltip/test/index.tsx b/packages/components/src/ui/ariakit-tooltip/test/index.tsx
index b1559b6d9b6cf9..c90999ef06c1ee 100644
--- a/packages/components/src/ui/ariakit-tooltip/test/index.tsx
+++ b/packages/components/src/ui/ariakit-tooltip/test/index.tsx
@@ -70,33 +70,11 @@ describe( 'ToolTip', () => {
render( );
- await user.tab();
-
- expect(
- screen.getByRole( 'button', { name: /Button/i } )
- ).toHaveFocus();
-
- await waitFor( () =>
- expect(
- screen.getByRole( 'tooltip', { name: /tooltip text/i } )
- ).toBeVisible()
- );
+ const button = screen.getByRole( 'button', { name: /Button/i } );
await user.tab();
- expect(
- screen.queryByRole( 'tooltip', { name: /tooltip text/i } )
- ).not.toBeInTheDocument();
- } );
-
- it( 'should render the tooltip when the tooltip anchor is hovered', async () => {
- const user = userEvent.setup();
-
- render( );
-
- const button = screen.getByRole( 'button', { name: /Button/i } );
-
- await user.hover( button );
+ expect( button ).toHaveFocus();
await waitFor( () =>
expect(
@@ -104,6 +82,7 @@ describe( 'ToolTip', () => {
).toBeVisible()
);
+ await user.tab();
await user.unhover( button );
expect(
@@ -150,35 +129,6 @@ describe( 'ToolTip', () => {
).not.toBeInTheDocument();
} );
- it( 'should show tooltip when an element is disabled', async () => {
- const user = userEvent.setup();
-
- render(
-
-
-
- );
-
- const button = screen.getByRole( 'button', { name: /Button/i } );
-
- expect( button ).toBeVisible();
- expect( button ).toHaveAttribute( 'aria-disabled' );
-
- await user.hover( button );
-
- await waitFor( () =>
- expect(
- screen.getByRole( 'tooltip', { name: /tooltip text/i } )
- ).toBeVisible()
- );
-
- await user.unhover( button );
-
- expect(
- screen.queryByRole( 'tooltip', { name: /tooltip text/i } )
- ).not.toBeInTheDocument();
- } );
-
it( 'should not show tooltip if the mouse leaves the tooltip anchor before set delay', async () => {
const user = userEvent.setup();
const onMouseEnterMock = jest.fn();
@@ -245,6 +195,57 @@ describe( 'ToolTip', () => {
).not.toBeInTheDocument();
} );
+ it( 'should render the tooltip when the tooltip anchor is hovered', async () => {
+ const user = userEvent.setup();
+
+ render( );
+
+ const button = screen.getByRole( 'button', { name: /Button/i } );
+
+ await user.hover( button );
+
+ await waitFor( () =>
+ expect(
+ screen.getByRole( 'tooltip', { name: /tooltip text/i } )
+ ).toBeVisible()
+ );
+
+ await user.unhover( button );
+
+ expect(
+ screen.queryByRole( 'tooltip', { name: /tooltip text/i } )
+ ).not.toBeInTheDocument();
+ } );
+
+ it( 'should show tooltip when an element is disabled', async () => {
+ const user = userEvent.setup();
+
+ render(
+
+
+
+ );
+
+ const button = screen.getByRole( 'button', { name: /Button/i } );
+
+ expect( button ).toBeVisible();
+ expect( button ).toHaveAttribute( 'aria-disabled' );
+
+ await user.hover( button );
+
+ await waitFor( () =>
+ expect(
+ screen.getByRole( 'tooltip', { name: /tooltip text/i } )
+ ).toBeVisible()
+ );
+
+ await user.unhover( button );
+
+ expect(
+ screen.queryByRole( 'tooltip', { name: /tooltip text/i } )
+ ).not.toBeInTheDocument();
+ } );
+
it( 'should render the shortcut display text when a string is passed as the shortcut', async () => {
const user = userEvent.setup();