add tooltip to friends button

src/components/Navbar.tsx

@@ -11,6 +11,7 @@ import {
 import { GlobeAltIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
 import Avatar from "./Avatar";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/Tooltip";
 import { Card } from "./ui/card";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 
@@ -23,18 +24,59 @@ interface ButtonProps {
 
 function NavbarButton({ text, icon, href, ariaLabel }: ButtonProps) {
   return (
-    <div className="group">
+    <a
-      <a
+      aria-label={ariaLabel}
-        aria-label={ariaLabel}
+      className="flex h-full w-fit transform-gpu items-center justify-center gap-1 rounded-md p-[8px] transition-all hover:cursor-pointer hover:bg-blue-500"
-        className="flex h-full w-fit transform-gpu items-center justify-center gap-1 rounded-md p-[10px] transition-all hover:cursor-pointer hover:bg-blue-500"
+      href={href}
-        href={href}
+    >
-      >
+      <>
-        <>
+        {icon}
-          {icon}
+        <p className="hidden md:block">{text}</p>
-          <p className="hidden md:block">{text}</p>
+      </>
-        </>
+    </a>
-      </a>
+  );
-    </div>
+}
+
+function FriendsButton() {
+  const settingsStore = useStore(useSettingsStore, (state) => state);
+
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <NavbarButton
+          ariaLabel="View your friends"
+          text="Friends"
+          icon={<UserIcon height={20} width={20} />}
+        />
+      </PopoverTrigger>
+      <PopoverContent className="p-2">
+        {settingsStore?.friends.length == 0 ? (
+          <p className="text-sm font-bold">No friends, add someone!</p>
+        ) : (
+          settingsStore?.friends.map((friend) => {
+            return (
+              <Link
+                key={friend.id}
+                href={`/player/${friend.id}/top/1`}
+                className="w-full"
+              >
+                <div className="flex transform-gpu gap-2 rounded-md p-2 text-left transition-all hover:bg-background">
+                  <Avatar
+                    url={friend.profilePicture}
+                    label="Friend avatar"
+                    size={48}
+                  />
+                  <div>
+                    <p className="text-sm text-gray-400">#{friend.rank}</p>
+                    <p>{friend.name}</p>
+                  </div>
+                </div>
+              </Link>
+            );
+          })
+        )}
+      </PopoverContent>
+    </Popover>
   );
 }
 
@@ -59,42 +101,13 @@ export default function Navbar() {
           />
         )}
 
-        <Popover>
+        <Tooltip>
-          <PopoverTrigger>
+          <TooltipTrigger>
-            <NavbarButton
+            <FriendsButton />
-              ariaLabel="View your friends"
+          </TooltipTrigger>
-              text="Friends"
+          <TooltipContent>Click to view your friends</TooltipContent>
-              icon={<UserIcon height={20} width={20} />}
+        </Tooltip>
-            />
+
-          </PopoverTrigger>
-          <PopoverContent className="p-2">
-            {settingsStore?.friends.length == 0 ? (
-              <p className="text-sm font-bold">No friends, add someone!</p>
-            ) : (
-              settingsStore?.friends.map((friend) => {
-                return (
-                  <Link
-                    key={friend.id}
-                    href={`/player/${friend.id}/top/1`}
-                    className="w-full"
-                  >
-                    <div className="flex transform-gpu gap-2 rounded-md p-2 text-left transition-all hover:bg-background">
-                      <Avatar
-                        url={friend.profilePicture}
-                        label="Friend avatar"
-                        size={48}
-                      />
-                      <div>
-                        <p className="text-sm text-gray-400">#{friend.rank}</p>
-                        <p>{friend.name}</p>
-                      </div>
-                    </div>
-                  </Link>
-                );
-              })
-            )}
-          </PopoverContent>
-        </Popover>
         <NavbarButton
           ariaLabel="View the global ranking"
           text="Ranking"

src/components/ui/Tooltip.tsx

@@ -18,7 +18,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "bg-popover text-popover-foreground 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 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
+      "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}