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>