switch between popover and tooltip components based on device type

Author: pettinarip

package.json

@@ -46,6 +46,7 @@
     "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
     "@radix-ui/react-visually-hidden": "^1.1.0",
     "@sentry/nextjs": "^8.19.0",
     "@socialgouv/matomo-next": "^1.8.0",

src/components/Tooltip/index.tsx

@@ -1,6 +1,13 @@
 import React, { ComponentProps, ReactNode, useEffect } from "react"
 
+import { isMobile } from "@/lib/utils/isMobile"
+
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"
+import {
+  Tooltip as Tooltipcomponent,
+  TooltipContent,
+  TooltipTrigger,
+} from "../ui/tooltip"
 
 import { useDisclosure } from "@/hooks/useDisclosure"
 
@@ -57,24 +64,25 @@ const Tooltip = ({
     }
   }
 
+  // Use Popover on mobile devices since the user can't hover
+  const Component = isMobile() ? Popover : Tooltipcomponent
+  const Trigger = isMobile() ? PopoverTrigger : TooltipTrigger
+  const Content = isMobile() ? PopoverContent : TooltipContent
+
   return (
-    <Popover open={isOpen} onOpenChange={handleOpenChange} {...props}>
-      <PopoverTrigger
-        onMouseEnter={onOpen}
-        onMouseLeave={onClose}
-        className="focus-visible:rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-hover"
-      >
+    <Component open={isOpen} onOpenChange={handleOpenChange} {...props}>
+      <Trigger className="focus-visible:rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-hover">
         {children}
-      </PopoverTrigger>
-      <PopoverContent
+      </Trigger>
+      <Content
         side="top"
         sideOffset={2}
         className="w-80 px-5 text-sm"
         data-testid="tooltip-popover"
       >
         {content}
-      </PopoverContent>
-    </Popover>
+      </Content>
+    </Component>
   )
 }
 

src/components/ui/tooltip.tsx

@@ -0,0 +1,31 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils/cn"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ children, className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-popover overflow-hidden rounded-md bg-background-highlight p-4 text-sm text-body shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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}
+    <TooltipPrimitive.Arrow className="z-popover fill-background-highlight" />
+  </TooltipPrimitive.Content>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }

src/pages/_app.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from "react"
 import { appWithTranslation } from "next-i18next"
+import { TooltipProvider } from "@radix-ui/react-tooltip"
 import { init } from "@socialgouv/matomo-next"
 
 import { AppPropsWithLayout } from "@/lib/types"
@@ -26,13 +27,15 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
 
   return (
     <ThemeProvider>
-      <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>
+      </TooltipProvider>
     </ThemeProvider>
   )
 }

yarn.lock

@@ -4501,6 +4501,24 @@
     "@radix-ui/react-use-previous" "1.1.0"
     "@radix-ui/react-use-size" "1.1.0"
 
+"@radix-ui/react-tooltip@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.1.2.tgz#c42db2ffd7dcc6ff3d65407c8cb70490288f518d"
+  integrity sha512-9XRsLwe6Yb9B/tlnYCPVUd/TFS4J7HuOZW345DCeC6vKIxQGMZdx21RK4VoZauPD5frgkXTYVS5y90L+3YBn4w==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-dismissable-layer" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-popper" "1.2.0"
+    "@radix-ui/react-portal" "1.1.1"
+    "@radix-ui/react-presence" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-slot" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    "@radix-ui/react-visually-hidden" "1.1.0"
+
 "@radix-ui/react-use-callback-ref@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz#f4bb1f27f2023c984e6534317ebc411fc181107a"
@@ -13084,7 +13102,7 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-"prettier-fallback@npm:prettier@^3":
+"prettier-fallback@npm:prettier@^3", prettier@^3.1.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.2.tgz#03ff86dc7c835f2d2559ee76876a3914cec4a90a"
   integrity sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==
@@ -13099,11 +13117,6 @@ prettier@^2.0.5, prettier@^2.8.8:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
   integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
 
-prettier@^3.1.1:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.2.tgz#03ff86dc7c835f2d2559ee76876a3914cec4a90a"
-  integrity sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==
-
 prettier@^3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.3.tgz#30c54fe0be0d8d12e6ae61dbb10109ea00d53105"