add tooltips

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 }