osias-trade/nexa-trade
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved tooltips

Browse Source
This commit is contained in:
selimaj-dev
2026-02-12 15:12:37 +01:00
parent 582b706f68
commit b6627f87aa
2 changed files with 34 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/markets/components/TokenCard.tsx
+28 -19
View File
@@ -107,19 +107,23 @@ export default function TokenCard({ token }: { token: Token }) {
<div className="flex gap-2 items-center text-xs text-[#5DBCFF] flex-wrap"> <div className="flex gap-2 items-center text-xs text-[#5DBCFF] flex-wrap">
{token.twitterPost ? ( {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) => e.stopPropagation()} href={`https://x.com/${token.twitterPost.author?.username}`}
> onClick={(e) => e.stopPropagation()}
by @{token.twitterPost.author?.username} >
</Link> by @{token.twitterPost.author?.username}
</Link>
</MinimalTooltip>
<p className="flex gap-0.5 items-center"> <MinimalTooltip label="Followers">
<UserIcon className="w-3 h-3" /> <p className="flex gap-0.5 items-center">
{humanizeNumber(token.twitterPost.author?.followers)} <UserIcon className="w-3 h-3" />
</p> {humanizeNumber(token.twitterPost.author?.followers)}
</p>
</MinimalTooltip>
</> </>
) : ( ) : (
<span className="invisible">by @username</span> <span className="invisible">by @username</span>
@@ -128,23 +132,23 @@ export default function TokenCard({ token }: { token: Token }) {
{/* Badges */} {/* Badges */}
<div className="flex gap-1.5 items-center flex-wrap"> <div className="flex gap-1.5 items-center flex-wrap">
<MinimalTooltip independent label="Top 10 Holders"> <MinimalTooltip independent bottom label="Top 10 Holders">
<TokenBadge value={live.topHolder} icon={UserStarIcon} /> <TokenBadge value={live.topHolder} icon={UserStarIcon} />
</MinimalTooltip> </MinimalTooltip>
<MinimalTooltip independent label="Dev Holdings"> <MinimalTooltip independent bottom label="Dev Holdings">
<TokenBadge value={live.devHold} icon={ChefHatIcon} /> <TokenBadge value={live.devHold} icon={ChefHatIcon} />
</MinimalTooltip> </MinimalTooltip>
<MinimalTooltip independent label="Snipers"> <MinimalTooltip independent bottom label="Snipers">
<TokenBadge value={live.snipersHold} icon={CrosshairIcon} /> <TokenBadge value={live.snipersHold} icon={CrosshairIcon} />
</MinimalTooltip> </MinimalTooltip>
<MinimalTooltip independent label="Insiders"> <MinimalTooltip independent bottom label="Insiders">
<TokenBadge value={live.insidersHold} icon={GhostIcon} /> <TokenBadge value={live.insidersHold} icon={GhostIcon} />
</MinimalTooltip> </MinimalTooltip>
<MinimalTooltip independent label="Bundlers"> <MinimalTooltip independent bottom label="Bundlers">
<TokenBadge value={live.bundleHold} icon={BoxesIcon} /> <TokenBadge value={live.bundleHold} icon={BoxesIcon} />
</MinimalTooltip> </MinimalTooltip>
</div> </div>
@@ -159,8 +163,13 @@ export default function TokenCard({ token }: { token: Token }) {
" "
> >
<div className="flex gap-4 md:flex-col md:gap-1"> <div className="flex gap-4 md:flex-col md:gap-1">
<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" bottom>
<TokenDigit name="V" value="$42k" />
</MinimalTooltip>
</div> </div>
<Button <Button
src/components/utils/MinimalTooltip.tsx
+6 -2
View File
@@ -4,15 +4,19 @@ export default function MinimalTooltip({
children, children,
label, label,
independent = false, independent = false,
bottom = false,
}: { }: {
children: React.ReactNode; children: React.ReactNode;
label: React.ReactNode; label: React.ReactNode;
independent?: boolean; independent?: boolean;
bottom?: boolean;
}) { }) {
return ( return (
<Tooltip> <Tooltip>
<TooltipTrigger asChild={!independent}>{children}</TooltipTrigger> <TooltipTrigger asChild={!independent}>
<TooltipContent>{label}</TooltipContent> <span className="inline-flex">{children}</span>
</TooltipTrigger>
<TooltipContent side={bottom ? "bottom" : "top"}>{label}</TooltipContent>
</Tooltip> </Tooltip>
); );
} }