Tooltips

src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { TooltipProvider } from "@/components/ui/tooltip";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -27,7 +28,7 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <TooltipProvider>{children}</TooltipProvider>
       </body>
     </html>
   );

src/app/markets/components/TokenCard.tsx

@@ -1,5 +1,11 @@
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import MinimalTooltip from "@/components/utils/MinimalTooltip";
 import { humanizeNumber } from "@/lib/renderUtils";
 import { cn } from "@/lib/utils";
 import { Token, TokenLiveData } from "@/modules/tokens/types";
@@ -35,7 +41,13 @@ export default function TokenCard({ token }: { token: Token }) {
   return (
     <div
       className="flex gap-4 cursor-pointer"
-      onClick={() => router.push(`/token/${token.mint}`)}
+      onClick={(e) => {
+        if (e.ctrlKey || e.metaKey) {
+          window.open(`/token/${token.mint}`, "_blank", "noopener,noreferrer");
+        } else {
+          router.push(`/token/${token.mint}`);
+        }
+      }}
       onContextMenu={() =>
         window.open(`/token/${token.mint}`, "_blank", "noopener,noreferrer")
       }
@@ -70,48 +82,76 @@ export default function TokenCard({ token }: { token: Token }) {
         </div>
         <div className="items-center flex gap-3">
           <p className="text-green-500 text-sm">20m</p>
-          <p className="text-sm flex gap-1 items-center">
-            <UsersIcon className="w-3.5 h-3.5 text-muted-foreground" />
-            10
-          </p>
-          <p className="text-sm flex gap-1 items-center">
-            <EyeIcon className="w-3.5 h-3.5" />
-            10
-          </p>
+          <MinimalTooltip label="Holders">
+            <p className="text-sm flex gap-1 items-center">
+              <UsersIcon className="w-3.5 h-3.5 text-muted-foreground" />
+              10
+            </p>
+          </MinimalTooltip>
+          <MinimalTooltip label="Live NEXA viewers">
+            <p className="text-sm flex gap-1 items-center">
+              <EyeIcon className="w-3.5 h-3.5" />
+              10
+            </p>
+          </MinimalTooltip>
         </div>
         <div className="flex gap-1.5 items-center text-xs text-[#5DBCFF]">
           {token.twitterPost ? (
             <>
-              <Link
-                className="hover:underline"
-                target="_blank"
-                href={`https://x.com/${token.twitterPost.author?.username}`}
-                onClick={(e) => {
-                  e.stopPropagation();
-                }}
-              >
-                by @{token.twitterPost.author?.username}
-              </Link>
-              <p className="flex gap-0.5 items-center">
-                <UserIcon className="w-3 h-3" />
-                {humanizeNumber(token.twitterPost.author?.followers)}
-              </p>
+              <MinimalTooltip label="Twitter author">
+                <Link
+                  className="hover:underline"
+                  target="_blank"
+                  href={`https://x.com/${token.twitterPost.author?.username}`}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                >
+                  by @{token.twitterPost.author?.username}
+                </Link>
+              </MinimalTooltip>
+              <MinimalTooltip label="Followers">
+                <p className="flex gap-0.5 items-center">
+                  <UserIcon className="w-3 h-3" />
+                  {humanizeNumber(token.twitterPost.author?.followers)}
+                </p>
+              </MinimalTooltip>
             </>
           ) : (
             <span className="invisible">by @username</span>
           )}
         </div>
         <div className="items-center flex gap-2">
-          <TokenBadge value={live.topHolder} icon={UserStarIcon} />
-          <TokenBadge value={live.devHold} icon={ChefHatIcon} />
-          <TokenBadge value={live.snipersHold} icon={CrosshairIcon} />
-          <TokenBadge value={live.insidersHold} icon={GhostIcon} />
-          <TokenBadge value={live.bundleHold} icon={BoxesIcon} />
+          <MinimalTooltip independent label="Top 10 holders">
+            <TokenBadge value={live.topHolder} icon={UserStarIcon} />
+          </MinimalTooltip>
+
+          <MinimalTooltip independent label="Developer holdings">
+            <TokenBadge value={live.devHold} icon={ChefHatIcon} />
+          </MinimalTooltip>
+
+          <MinimalTooltip independent label="Snipers">
+            <TokenBadge value={live.snipersHold} icon={CrosshairIcon} />
+          </MinimalTooltip>
+
+          <MinimalTooltip independent label="Insiders">
+            <TokenBadge value={live.insidersHold} icon={GhostIcon} />
+          </MinimalTooltip>
+
+          <MinimalTooltip independent label="Bundlers">
+            <TokenBadge value={live.bundleHold} icon={BoxesIcon} />
+          </MinimalTooltip>
         </div>
       </div>
       <div className="ml-auto flex flex-col">
-        <TokenDigit name="MC" value="$15.6k" />
-        <TokenDigit name="V" value="$42k" />
+        <MinimalTooltip label="Market Cap">
+          <TokenDigit name="MC" value="$15.6k" />
+        </MinimalTooltip>
+
+        <MinimalTooltip label="Volume">
+          <TokenDigit name="V" value="$42k" />
+        </MinimalTooltip>
+
         <Button
           className="mt-auto ml-auto p-1! h-max w-max rounded-full bg-primary/20 text-primary hover:text-black gap-1 text-xs"
           onClick={(e) => {