Fix/1008: Tooltip visibility (#1027)

* fix: tooltip visibility

* fix: remove event testing for now and check only controlled tooltips

* fix: remove unused import

libs/ui-toolkit/src/components/tooltip/tooltip.spec.tsx

@@ -1,28 +1,29 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Tooltip } from './tooltip';
 
 it('Renders a tooltip', async () => {
   const props = {
     description: 'description',
     children: <button>Tooltip</button>,
+    open: true,
   };
   render(<Tooltip {...props} />);
   // radix applies the data-state attribute
-  expect(screen.getByRole('button')).toHaveAttribute('data-state', 'closed');
+  const trigger = screen.getByRole('button');
-  fireEvent.mouseOver(screen.getByRole('button'));
+  expect(trigger).toHaveAttribute('data-state', 'instant-open');
-  expect(await screen.findByRole('tooltip')).toBeInTheDocument();
+  expect(screen.queryByRole('tooltip')).toBeInTheDocument();
 });
 
 it('Doesnt render a tooltip if no description provided', () => {
   const props = {
     description: undefined,
     children: <button>Tooltip</button>,
+    open: true,
   };
   render(<Tooltip {...props} />);
   expect(screen.getByRole('button')).not.toHaveAttribute(
     'data-state',
     'closed'
   );
-  fireEvent.mouseOver(screen.getByRole('button'));
   expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
 });

libs/ui-toolkit/src/components/tooltip/tooltip.tsx

@@ -6,6 +6,7 @@ import {
   Trigger,
   Content,
   Arrow,
+  Portal,
 } from '@radix-ui/react-tooltip';
 
 export interface TooltipProps {
@@ -21,6 +22,8 @@ export const Tooltip = ({ children, description, open, align }: TooltipProps) =>
     <Provider delayDuration={200} skipDelayDuration={100}>
       <Root open={open}>
         <Trigger asChild>{children}</Trigger>
+        {description && (
+          <Portal>
             <Content align={align} alignOffset={8}>
               <div className="relative z-0 p-8 bg-black-50 border border-black-60 text-white rounded-sm max-w-sm text-ui">
                 {description}
@@ -28,14 +31,16 @@ export const Tooltip = ({ children, description, open, align }: TooltipProps) =>
               <Arrow
                 width={10}
                 height={5}
-            className="mx-8 fill-black-60 dark:fill-white-60 z-0 translate-x-[1px] translate-y-[-1px]"
+                className="fill-black-60 dark:fill-white-60 z-0 translate-x-[1px] translate-y-[-1px]"
               />
               <Arrow
                 width={8}
                 height={4}
-            className="z-[1] mx-8 translate-y-[-1px] fill-black-50"
+                className="z-[1] translate-y-[-1px] fill-black-50"
               />
             </Content>
+          </Portal>
+        )}
       </Root>
     </Provider>
   ) : (

package.json

@@ -26,7 +26,7 @@
     "@radix-ui/react-select": "^0.1.1",
     "@radix-ui/react-slider": "^1.0.0",
     "@radix-ui/react-tabs": "^0.1.5",
-    "@radix-ui/react-tooltip": "^0.1.7",
+    "@radix-ui/react-tooltip": "^1.0.0",
     "@sentry/nextjs": "^6.19.3",
     "@sentry/react": "^6.19.2",
     "@sentry/tracing": "^6.19.2",

yarn.lock

@@ -3791,26 +3791,24 @@
     "@radix-ui/react-roving-focus" "0.1.5"
     "@radix-ui/react-use-controllable-state" "0.1.0"
 
-"@radix-ui/react-tooltip@^0.1.7":
+"@radix-ui/react-tooltip@^1.0.0":
-  version "0.1.7"
+  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-0.1.7.tgz#6f8c00d6e489565d14abf209ce0fb8853c8c8ee3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.0.tgz#f7fcecf2bac5c31cd14666b5acd056015fc21646"
-  integrity sha512-eiBUsVOHenZ0JR16tl970bB0DafJBz6mFgSGfIGIVpflFj0LIsIDiLMsYyvYdx1KwwsIUDTEZtxcPm/sWjPzqA==
+  integrity sha512-RB06pov+O4Npy10ei1C6fsyB9QoOjz7Ubo8Sl3qdKtLgkL9iI96925DYtH0bxx6MH6YB2FuzLU6B75qn3AQQQw==
   dependencies:
     "@babel/runtime" "^7.13.10"
-    "@radix-ui/primitive" "0.1.0"
+    "@radix-ui/primitive" "1.0.0"
-    "@radix-ui/react-compose-refs" "0.1.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-context" "0.1.1"
+    "@radix-ui/react-context" "1.0.0"
-    "@radix-ui/react-id" "0.1.5"
+    "@radix-ui/react-dismissable-layer" "1.0.0"
-    "@radix-ui/react-popper" "0.1.4"
+    "@radix-ui/react-id" "1.0.0"
-    "@radix-ui/react-portal" "0.1.4"
+    "@radix-ui/react-popper" "1.0.0"
-    "@radix-ui/react-presence" "0.1.2"
+    "@radix-ui/react-portal" "1.0.0"
-    "@radix-ui/react-primitive" "0.1.4"
+    "@radix-ui/react-presence" "1.0.0"
-    "@radix-ui/react-slot" "0.1.2"
+    "@radix-ui/react-primitive" "1.0.0"
-    "@radix-ui/react-use-controllable-state" "0.1.0"
+    "@radix-ui/react-slot" "1.0.0"
-    "@radix-ui/react-use-escape-keydown" "0.1.0"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
-    "@radix-ui/react-use-previous" "0.1.1"
+    "@radix-ui/react-visually-hidden" "1.0.0"
-    "@radix-ui/react-use-rect" "0.1.1"
-    "@radix-ui/react-visually-hidden" "0.1.4"
 
 "@radix-ui/react-use-body-pointer-events@0.1.1":
   version "0.1.1"
@@ -3940,6 +3938,14 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "0.1.4"
 
+"@radix-ui/react-visually-hidden@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.0.tgz#4d69d7e3b6d21ee4678ed6de5215dcd068394401"
+  integrity sha512-MwAhMdX+n6S4InwRKSnpUsp+lLkYG6izQF56ul6guSX2mBBLOMV9Frx7xJlkEe2GjKLzbNuHhaCS6e5gopmZNA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.0"
+
 "@radix-ui/rect@0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-0.1.1.tgz#95b5ba51f469bea6b1b841e2d427e17e37d38419"