feat: add tooltip component and integrate it into ServerDetailOverview

package.json

@@ -25,8 +25,9 @@
     "@radix-ui/react-separator": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-switch": "^1.1.2",
-    "@tanstack/react-query": "^5.65.1",
+    "@radix-ui/react-tooltip": "^1.1.7",
-    "@tanstack/react-query-devtools": "^5.65.1",
+    "@tanstack/react-query": "^5.66.0",
+    "@tanstack/react-query-devtools": "^5.66.0",
     "@tanstack/react-table": "^8.20.6",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/d3-geo": "^3.1.0",
@@ -46,15 +47,15 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-i18next": "^15.4.0",
-    "react-router-dom": "^7.1.3",
+    "react-router-dom": "^7.1.5",
     "recharts": "^2.15.1",
-    "sonner": "^1.7.3",
+    "sonner": "^1.7.4",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@eslint/js": "^9.19.0",
-    "@types/node": "^22.12.0",
+    "@types/node": "^22.13.0",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react-swc": "^3.7.2",

src/components/ServerDetailOverview.tsx

@@ -14,6 +14,7 @@ import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
 
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./ui/accordion"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip"
 
 export default function ServerDetailOverview({ server_id }: { server_id: string }) {
   const { t } = useTranslation()
@@ -165,17 +166,26 @@ export default function ServerDetailOverview({ server_id }: { server_id: string
         ) : null}
 
         {country_code && (
-          <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <TooltipProvider delayDuration={100}>
-            <CardContent className="px-1.5 py-1">
+            <Tooltip>
-              <section className="flex flex-col items-start gap-0.5">
+              <TooltipTrigger asChild>
-                <p className="text-xs text-muted-foreground">{t("serverDetail.region")}</p>
+                <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-                <section className="flex items-start gap-1">
+                  <CardContent className="px-1.5 py-1">
-                  <div className="text-xs text-start">{countries.getName(country_code?.toUpperCase(), "en")}</div>
+                    <section className="flex flex-col items-start gap-0.5">
-                  {country_code && <ServerFlag className="text-[11px] -mt-[1px]" country_code={country_code} />}
+                      <p className="text-xs text-muted-foreground">{t("serverDetail.region")}</p>
-                </section>
+                      <section className="flex items-start gap-1">
-              </section>
+                        <div className="text-xs text-start">{country_code?.toUpperCase()}</div>
-            </CardContent>
+                        {country_code && <ServerFlag className="text-[11px] -mt-[1px]" country_code={country_code} />}
-          </Card>
+                      </section>
+                    </section>
+                  </CardContent>
+                </Card>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{countries.getName(country_code?.toUpperCase(), "en")}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         )}
       </section>
       <section className="flex flex-wrap gap-2 mt-1">

src/components/ui/tooltip.tsx

@@ -0,0 +1,27 @@
+import { cn } from "@/lib/utils"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from "react"
+
+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(
+      "z-50 overflow-hidden rounded-[8px] border font-medium bg-popover px-1.5 py-0.5 text-xs text-popover-foreground shadow-lg 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 }