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

@@ -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,10 +92,10 @@ export function Wardrobe({
           const value = slots[layout.name];
           const asset = resolveSlotAsset(value, items);
           return (
+            <Tooltip key={layout.name}>
+              <TooltipTrigger asChild>
                 <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(
@@ -108,6 +109,16 @@ export function Wardrobe({
                 >
                   {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>