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">
+          <MinimalTooltip label="Holders">
-            <UsersIcon className="w-3.5 h-3.5 text-muted-foreground" />
+            <p className="text-sm flex gap-1 items-center">
-            10
+              <UsersIcon className="w-3.5 h-3.5 text-muted-foreground" />
-          </p>
+              10
-          <p className="text-sm flex gap-1 items-center">
+            </p>
-            <EyeIcon className="w-3.5 h-3.5" />
+          </MinimalTooltip>
-            10
+          <MinimalTooltip label="Live NEXA viewers">
-          </p>
+            <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
+              <MinimalTooltip label="Twitter author">
-                className="hover:underline"
+                <Link
-                target="_blank"
+                  className="hover:underline"
-                href={`https://x.com/${token.twitterPost.author?.username}`}
+                  target="_blank"
-                onClick={(e) => {
+                  href={`https://x.com/${token.twitterPost.author?.username}`}
-                  e.stopPropagation();
+                  onClick={(e) => {
-                }}
+                    e.stopPropagation();
-              >
+                  }}
-                by @{token.twitterPost.author?.username}
+                >
-              </Link>
+                  by @{token.twitterPost.author?.username}
-              <p className="flex gap-0.5 items-center">
+                </Link>
-                <UserIcon className="w-3 h-3" />
+              </MinimalTooltip>
-                {humanizeNumber(token.twitterPost.author?.followers)}
+              <MinimalTooltip label="Followers">
-              </p>
+                <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} />
+          <MinimalTooltip independent label="Top 10 holders">
-          <TokenBadge value={live.devHold} icon={ChefHatIcon} />
+            <TokenBadge value={live.topHolder} icon={UserStarIcon} />
-          <TokenBadge value={live.snipersHold} icon={CrosshairIcon} />
+          </MinimalTooltip>
-          <TokenBadge value={live.insidersHold} icon={GhostIcon} />
+
-          <TokenBadge value={live.bundleHold} icon={BoxesIcon} />
+          <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" />
+        <MinimalTooltip label="Market Cap">
-        <TokenDigit name="V" value="$42k" />
+          <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) => {

src/components/ui/tooltip.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import * as React from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-background text-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 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-background fill-background z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

src/components/utils/MinimalTooltip.tsx

@@ -0,0 +1,18 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+
+export default function MinimalTooltip({
+  children,
+  label,
+  independent = false,
+}: {
+  children: React.ReactNode;
+  label: React.ReactNode;
+  independent?: boolean;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild={!independent}>{children}</TooltipTrigger>
+      <TooltipContent>{label}</TooltipContent>
+    </Tooltip>
+  );
+}