Switch to using shadcn/ui tooltip

components/slice-selector.tsx

@@ -5,12 +5,17 @@
 import React, { ReactElement, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { Tab } from '@headlessui/react';
-import { Tooltip } from 'react-tooltip';
 import clsx from 'clsx';
 
 import { AppLink } from '@/components/nodes/app-link';
 import { Mode, modes } from 'types';
 import { useMode } from 'context/state';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from '@/components/ui/tooltip';
 
 type SliceSelectorProps = {
   className?: string;
@@ -114,32 +119,31 @@ const ModeTab = ({
     );
 
   return (
-    <>
-      <Tab
-        as="div"
-        className={className}
-        id={showTooltip == true ? `tooltip-${mode}` : ''}
-        data-tooltip-place="bottom"
-      >
-        {mode}
-      </Tab>
-      {showTooltip == true && (
-        <TooltipPortal>
-          <Tooltip
-            anchorSelect={`#tooltip-${mode}`}
-            clickable
-            opacity={1}
-            style={{
-              width: '14rem',
-              backgroundColor: '#32363c',
-              borderRadius: '0.6rem'
-            }}
-          >
-            {tooltipContent}
-          </Tooltip>
-        </TooltipPortal>
-      )}
-    </>
+    <Tab
+      as="div"
+      className={className}
+      id={showTooltip == true ? `tooltip-${mode}` : ''}
+      data-tooltip-place="bottom"
+    >
+      <TooltipProvider delayDuration={0}>
+        <Tooltip>
+          <TooltipTrigger className="size-full">
+            <span className="uppercase">{mode}</span>
+          </TooltipTrigger>
+          {showTooltip == true && (
+            <TooltipPortal>
+              <TooltipContent
+                side="bottom"
+                sideOffset={15}
+                className="ml-2 border border-lightBorder bg-white dark:border-darkBorder dark:bg-[#232429] dark:text-white"
+              >
+                {tooltipContent}
+              </TooltipContent>
+            </TooltipPortal>
+          )}
+        </Tooltip>
+      </TooltipProvider>
+    </Tab>
   );
 };
 

components/ui/tooltip.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) ZeroC, Inc.
+
+/* eslint-disable */
+
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import { cn } from '@/lib/utils';
+
+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>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      'bg-popover text-popover-foreground overflow-hidden rounded-md border px-3 py-1.5 text-sm 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}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package.json

@@ -19,6 +19,7 @@
     "@markdoc/markdoc": "^0.4.0",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cookies-next": "^4.1.1",
@@ -37,7 +38,6 @@
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-tooltip": "^5.26.0",
     "reading-time": "^1.5.0",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7"