use popover instead of shadcn tooltip

Author: pettinarip

src/components/Tooltip/index.tsx

@@ -1,13 +1,6 @@
 import React, { ReactNode, useEffect } from "react"
 
-import { isMobile } from "@/lib/utils/isMobile"
-
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"
-import {
-  Tooltip as RootTooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "../ui/tooltip"
 
 import { useDisclosure } from "@/hooks/useDisclosure"
 
@@ -59,24 +52,15 @@ const Tooltip = ({ content, children, onBeforeOpen }: TooltipProps) => {
     }
   }
 
-  // Mobile devices use the Popover component because it supports click/touch
-  // events
-  if (isMobile()) {
-    return (
-      <Popover open={isOpen} onOpenChange={handleOpenChange}>
-        <PopoverTrigger>{children}</PopoverTrigger>
-        <PopoverContent data-testid="tooltip-popover">{content}</PopoverContent>
-      </Popover>
-    )
-  }
-
-  // Desktop devices use the Tooltip component because it is desined for hover
-  // and focus events
   return (
-    <RootTooltip open={isOpen} onOpenChange={handleOpenChange}>
-      <TooltipTrigger>{children}</TooltipTrigger>
-      <TooltipContent data-testid="tooltip-popover">{content}</TooltipContent>
-    </RootTooltip>
+    <Popover open onOpenChange={handleOpenChange}>
+      <PopoverTrigger onMouseEnter={onOpen} onMouseLeave={onClose}>
+        {children}
+      </PopoverTrigger>
+      <PopoverContent side="top" data-testid="tooltip-popover">
+        {content}
+      </PopoverContent>
+    </Popover>
   )
 }
 

src/components/ui/popover.tsx

@@ -21,13 +21,13 @@ const PopoverContent = React.forwardRef<
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "text-popover-foreground z-popover w-72 rounded-md border bg-background-highlight p-4 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "text-popover-foreground z-popover w-72 rounded-md bg-background-highlight p-4 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
           className
         )}
         {...props}
       >
         {children}
-        <PopoverPrimitive.Arrow className="fill-background-highlight" />
+        <PopoverPrimitive.Arrow className="z-popover fill-background-highlight" />
       </PopoverPrimitive.Content>
     </PopoverPrimitive.Portal>
   )

src/components/ui/tooltip.tsx

@@ -5,7 +5,6 @@ import { init } from "@socialgouv/matomo-next"
 import { AppPropsWithLayout } from "@/lib/types"
 
 import ThemeProvider from "@/components/ThemeProvider"
-import { TooltipProvider } from "@/components/ui/tooltip"
 
 import "@/styles/global.css"
 import "@/styles/fonts.css"
@@ -28,15 +27,13 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
 
   return (
     <ThemeProvider>
-      <TooltipProvider>
-        <BaseLayout
-          contentIsOutdated={!!pageProps.frontmatter?.isOutdated}
-          contentNotTranslated={pageProps.contentNotTranslated}
-          lastDeployLocaleTimestamp={pageProps.lastDeployLocaleTimestamp}
-        >
-          {getLayout(<Component {...pageProps} />)}
-        </BaseLayout>
-      </TooltipProvider>
+      <BaseLayout
+        contentIsOutdated={!!pageProps.frontmatter?.isOutdated}
+        contentNotTranslated={pageProps.contentNotTranslated}
+        lastDeployLocaleTimestamp={pageProps.lastDeployLocaleTimestamp}
+      >
+        {getLayout(<Component {...pageProps} />)}
+      </BaseLayout>
     </ThemeProvider>
   )
 }