add tooltips

src/app/(pages)/page.tsx

@@ -1,13 +1,22 @@
 import Link from "next/link";
+import { Button } from "../components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip";
 
 type Button = {
   title: string;
+  tooltip: string;
   url: string;
+  openInNewTab?: boolean;
 };
 
 const buttons: Button[] = [
-  { title: "Get Started", url: "/player" },
-  { title: "Documentation", url: "https://api.mcutils.xyz/swagger-ui.html" },
+  { title: "Get Started", tooltip: "Click to get open the player page", url: "/player" },
+  {
+    title: "Documentation",
+    tooltip: "Click to open the documentation",
+    url: "https://api.mcutils.xyz/swagger-ui.html",
+    openInNewTab: true,
+  },
 ];
 
 export default function Home(): JSX.Element {
@@ -22,14 +31,18 @@ export default function Home(): JSX.Element {
       <div className="mt-6 flex flex-row gap-2 justify-center">
         {buttons.map((button, index) => {
           return (
-            <Link
-              key={index}
-              href={button.url}
-              target="_blank"
-              className="w-fit p-2 rounded-lg hover:text-primary transition-all cursor-pointer bg-secondary"
-            >
-              <p>{button.title}</p>
-            </Link>
+            <Tooltip key={index}>
+              <TooltipTrigger>
+                <Button key={index}>
+                  <Link href={button.url} target={button.openInNewTab ? "_blank" : ""}>
+                    <p>{button.title}</p>
+                  </Link>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{button.tooltip}</p>
+              </TooltipContent>
+            </Tooltip>
           );
         })}
       </div>

src/app/(pages)/player/[[...id]]/page.tsx

@@ -2,6 +2,7 @@
 import { Card } from "@/app/components/card";
 import { ErrorCard } from "@/app/components/error-card";
 import { LookupPlayer } from "@/app/components/player/lookup-player";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/app/components/ui/tooltip";
 import { generateEmbed } from "@/common/embed";
 import { CachedPlayer, McUtilsAPIError, SkinPart, getPlayer } from "mcutils-library";
 import { Metadata } from "next";
@@ -92,9 +93,18 @@ export default async function Page({ params: { id } }: Params): Promise<JSX.Elem
                     .filter(([part]) => part !== SkinPart.HEAD) // Don't show the head part again
                     .map(([part, url]) => {
                       return (
-                        <Link key={part} href={url} target="_blank">
-                          <img className="h-[64px]" src={url} alt={`The player's ${part}`} loading="lazy" />
-                        </Link>
+                        <Tooltip key={part}>
+                          <TooltipTrigger>
+                            <Link href={url} target="_blank">
+                              <img className="h-[64px]" src={url} alt={`The player's ${part}`} loading="lazy" />
+                            </Link>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>
+                              Click to view {player.username}&apos;s {part}
+                            </p>
+                          </TooltipContent>
+                        </Tooltip>
                       );
                     })}
                 </div>

src/app/components/player/lookup-player.tsx

@@ -4,6 +4,7 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 
 export function LookupPlayer(): JSX.Element {
   const router = useRouter();
@@ -31,9 +32,16 @@ export function LookupPlayer(): JSX.Element {
   return (
     <form className="flex gap-2 justify-center mt-2">
       <Input className="w-fit" placeholder="Name / UUID" value={player} onChange={setPlayerValue} maxLength={36} />
-      <Button type="submit" onClick={() => lookupPlayer()}>
-        Lookup
-      </Button>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button type="submit" onClick={() => lookupPlayer()}>
+            Lookup
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Click to lookup the player</p>
+        </TooltipContent>
+      </Tooltip>
     </form>
   );
 }

src/app/components/server/lookup-server.tsx

@@ -1,10 +1,12 @@
 "use client";
 
+import { capitalizeFirstLetter } from "@/common/string-utils";
 import { ServerPlatform } from "mcutils-library";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 
 export function LookupServer(): JSX.Element {
   const router = useRouter();
@@ -31,12 +33,26 @@ export function LookupServer(): JSX.Element {
     router.push(`/server/${platform}/${hostname}`);
   };
 
+  const LookupButton = ({ platform }: { platform: ServerPlatform }): JSX.Element => {
+    const name = capitalizeFirstLetter(platform);
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button type="submit">{name}</Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Click to lookup the server as a {name} server</p>
+        </TooltipContent>
+      </Tooltip>
+    );
+  };
+
   return (
     <form className="flex gap-2 justify-center items-center mt-2 flex-col xs:flex-row">
       <Input className="w-fit" placeholder="Hostname" value={hostname} onChange={setHostnameValue} maxLength={128} />
       <div className="flex gap-2 justify-center">
-        <Button onClick={() => lookupServer(ServerPlatform.Java)}>Java</Button>
-        <Button onClick={() => lookupServer(ServerPlatform.Bedrock)}>Bedrock</Button>
+        <LookupButton platform={ServerPlatform.Java} />
+        <LookupButton platform={ServerPlatform.Bedrock} />
       </div>
     </form>
   );

src/app/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/common/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(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground 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 }

src/app/layout.tsx

@@ -8,6 +8,7 @@ import "./globals.css";
 import Config from "../../config.json";
 import Container from "./components/container";
 import ThemeProvider from "./components/theme-provider";
+import { TooltipProvider } from "./components/ui/tooltip";
 
 export const viewport: Viewport = {
   themeColor: "#3498DB",
@@ -49,8 +50,10 @@ export default function RootLayout({
         <head />
         <body>
           <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
-            <ToastContainer theme="dark" pauseOnFocusLoss={false} />
-            <Container>{children}</Container>
+            <TooltipProvider>
+              <ToastContainer theme="dark" pauseOnFocusLoss={false} />
+              <Container>{children}</Container>
+            </TooltipProvider>
           </ThemeProvider>
         </body>
       </html>