fix(tooltip): wrapper provider

Qovery · Dec 12, 2022 · 2c31d49 · 2c31d49
1 parent 39f0b02
commit 2c31d49
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 34 deletions.
diff --git a/__tests__/utils/providers.tsx b/__tests__/utils/providers.tsx
@@ -1,5 +1,4 @@
 import { Auth0Provider } from '@auth0/auth0-react'
-import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 import { configureStore } from '@reduxjs/toolkit'
 import posthog from 'posthog-js'
 import React, { ComponentType, ReactNode } from 'react'
@@ -34,11 +33,9 @@ export const Wrapper: React.FC<Props> = ({ children, reduxState = initialRootSta
   return (
     <Auth0Provider clientId="__test_client_id__" domain="__test_domain__">
       <Provider store={store}>
-        <TooltipPrimitive.Provider>
-          <ModalProvider>
-            <MemoryRouter>{children}</MemoryRouter>
-          </ModalProvider>
-        </TooltipPrimitive.Provider>
+        <ModalProvider>
+          <MemoryRouter>{children}</MemoryRouter>
+        </ModalProvider>
       </Provider>
     </Auth0Provider>
   )

diff --git a/apps/console/src/main.tsx b/apps/console/src/main.tsx
@@ -1,5 +1,4 @@
 import { AppState, Auth0Provider } from '@auth0/auth0-react'
-import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 import { createBrowserHistory } from 'history'
 import posthog from 'posthog-js'
 import { createRoot } from 'react-dom/client'
@@ -41,12 +40,10 @@ root.render(
     >
       <Provider store={store}>
         <BrowserRouter>
-          <TooltipPrimitive.Provider>
-            <ModalProvider>
-              <App />
-              <ToastBehavior />
-            </ModalProvider>
-          </TooltipPrimitive.Provider>
+          <ModalProvider>
+            <App />
+            <ToastBehavior />
+          </ModalProvider>
         </BrowserRouter>
       </Provider>
     </Auth0Provider>

diff --git a/libs/shared/ui/src/lib/components/tooltip/tooltip.tsx b/libs/shared/ui/src/lib/components/tooltip/tooltip.tsx
@@ -25,28 +25,32 @@ export function Tooltip(props: TooltipProps) {
   } = props
 
   return (
-    <TooltipPrimitive.Root
-      open={open}
-      defaultOpen={defaultOpen}
-      onOpenChange={onOpenChange}
-      delayDuration={delayDuration}
-    >
-      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
-      <TooltipPrimitive.Content
-        className="bg-element-dark-400 text-text-100 dark:bg-element-light-lighter-200 dark:text-text-700 rounded-sm px-2 py-1 text-xs font-medium"
-        side={side}
-        sideOffset={6}
-        align={align}
+    <TooltipPrimitive.Provider>
+      <TooltipPrimitive.Root
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={onOpenChange}
+        delayDuration={delayDuration}
       >
-        {content}
-        <TooltipPrimitive.Arrow
-          className="fill-element-dark-400 dark:fill-element-light-lighter-200"
-          offset={10}
-          width={11}
-          height={5}
-        />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Root>
+        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+        <TooltipPrimitive.Portal>
+          <TooltipPrimitive.Content
+            className="bg-element-dark-400 text-text-100 dark:bg-element-light-lighter-200 dark:text-text-700 rounded-sm px-2 py-1 text-xs font-medium z-50"
+            side={side}
+            sideOffset={6}
+            align={align}
+          >
+            {content}
+            <TooltipPrimitive.Arrow
+              className="fill-element-dark-400 dark:fill-element-light-lighter-200"
+              offset={10}
+              width={11}
+              height={5}
+            />
+          </TooltipPrimitive.Content>
+        </TooltipPrimitive.Portal>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
   )
 }