From d11d45361019cae9b777d1e94b938353b0cd94e0 Mon Sep 17 00:00:00 2001
From: Lina <linabell@mail.com>
Date: Wed, 4 Feb 2026 18:17:53 -0800
Subject: [PATCH] add description to tooltip

---
 client/src/components/PageContainer.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/client/src/components/PageContainer.tsx b/client/src/components/PageContainer.tsx
index f12f740..3624824 100644
--- a/client/src/components/PageContainer.tsx
+++ b/client/src/components/PageContainer.tsx
@@ -55,13 +55,16 @@ export const PageContainer = ({
             <div className="grid grid-cols-3 gap-6 pt-4">
               {badges &&
                 Object.values(badges).map((badge) => {
-                  const hasBadge = visitorInventory && Object.keys(visitorInventory).includes(badge.name);
+                  const { name, description, icon } = badge;
+                  const hasBadge = visitorInventory && Object.keys(visitorInventory).includes(name);
                   const style = { width: "90px", filter: "none" };
                   if (!hasBadge) style.filter = "grayscale(1)";
                   return (
-                    <div className="tooltip" key={badge.id}>
-                      <span className="tooltip-content">{badge.name}</span>
-                      <img src={badge.icon} alt={badge.name} style={style} />
+                    <div className="tooltip" key={name}>
+                      <span className="tooltip-content" style={{ width: "115px" }}>
+                        {name} {description && `- ${description}`}
+                      </span>
+                      <img src={icon} alt={name} style={style} />
                     </div>
                   );
                 })}