From be8e5373856e1a8a5dd95fa5bf07badb7d658b96 Mon Sep 17 00:00:00 2001
From: Z8MB1E <jason@onyxsimple.com>
Date: Sun, 2 Aug 2026 18:52:45 -0400
Subject: [PATCH] feat(locker): add hover tooltip to wardrobe slot hotspots

- Wrap each wardrobe slot button with shadcn Tooltip component
- Show slot name and current item name on hover
- Use smooth fade-in/zoom-in animation from shadcn tooltip
- Position tooltip to the right of each hotspot with 8px offset
---
 src/components/frontend/locker/Wardrobe.tsx | 45 +++++++++++++--------
 1 file changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/components/frontend/locker/Wardrobe.tsx b/src/components/frontend/locker/Wardrobe.tsx
index a4715d0..a115d4f 100644
--- a/src/components/frontend/locker/Wardrobe.tsx
+++ b/src/components/frontend/locker/Wardrobe.tsx
@@ -22,6 +22,7 @@ import {
 } from "@/lib/locker";
 import { cn } from "@/lib/utils";
 import { getAssetIcon } from "./LockerGrid";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 
 function slotIcon(icon: WardrobeSlotIcon, filled: boolean) {
   const cls = filled ? "size-3.5" : "size-3";
@@ -91,23 +92,33 @@ export function Wardrobe({
           const value = slots[layout.name];
           const asset = resolveSlotAsset(value, items);
           return (
-            <button
-              key={layout.name}
-              type="button"
-              title={asset ? `${layout.label}: ${asset.name}` : `${layout.label} (empty)`}
-              aria-label={`${layout.label} slot: ${asset ? asset.name : "empty"}`}
-              onClick={() => onSlotClick(layout.name)}
-              className={cn(
-                "absolute flex items-center justify-center rounded-full border transition-colors",
-                "-translate-x-1/2 -translate-y-1/2 cursor-pointer",
-                asset
-                  ? "size-7 border-amber-400/70 bg-amber-500/25 text-amber-200 hover:bg-amber-500/40"
-                  : "size-6 border-border bg-background/80 text-muted-foreground hover:border-primary hover:text-foreground",
-              )}
-              style={{ left: `${layout.x}%`, top: `${layout.y}%` }}
-            >
-              {asset ? getAssetIcon(asset.assetType, "size-3.5") : slotIcon(layout.icon, false)}
-            </button>
+            <Tooltip key={layout.name}>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  aria-label={`${layout.label} slot: ${asset ? asset.name : "empty"}`}
+                  onClick={() => onSlotClick(layout.name)}
+                  className={cn(
+                    "absolute flex items-center justify-center rounded-full border transition-colors",
+                    "-translate-x-1/2 -translate-y-1/2 cursor-pointer",
+                    asset
+                      ? "size-7 border-amber-400/70 bg-amber-500/25 text-amber-200 hover:bg-amber-500/40"
+                      : "size-6 border-border bg-background/80 text-muted-foreground hover:border-primary hover:text-foreground",
+                  )}
+                  style={{ left: `${layout.x}%`, top: `${layout.y}%` }}
+                >
+                  {asset ? getAssetIcon(asset.assetType, "size-3.5") : slotIcon(layout.icon, false)}
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="right" sideOffset={8}>
+                <div className="flex flex-col gap-0.5">
+                  <span className="font-medium">{layout.label}</span>
+                  <span className="text-muted-foreground">
+                    {asset ? asset.name : "Empty"}
+                  </span>
+                </div>
+              </TooltipContent>
+            </Tooltip>
           );
         })}
       </div>