Fix leaderboard tooltip and show repository streaks

Author: dhyana6466

Frontend/src/components/TopContributorsRepos.jsx

@@ -26,35 +26,84 @@ const TopContributorsRepos = () => {
         <h3>
           Top Contributors{" "}
           <span
+          style={{
+            position: "relative",
+            display: "inline-block",
+            marginLeft: "6px"
+          }}
+          >
+            <span
             tabIndex="0"
             aria-label="Leaderboard streak info"
-            title="A streak increases for every consecutive 7-day period where a user closes at least 3 issues. Streak resets if threshold is not met."
-            style={{ cursor: "pointer", border: "1px solid black", borderRadius: "50%", padding: "2px 6px", fontSize: "12px" }}
+            style={{ 
+              cursor: "pointer", 
+              border: "1px solid black", 
+              borderRadius: "50%", 
+              padding: "2px 6px", 
+              fontSize: "12px",
+              display: "inline-block" 
+            }}
+            onMouseEnter={(e) => {
+              const tooltip = e.currentTarget.nextElementSibling;
+              if (tooltip) tooltip.style.visibility = "visible";
+              if (tooltip) tooltip.style.opacity = "1";
+            }}
+            onMouseLeave={(e) => {
+              const tooltip = e.currentTarget.nextElementSibling;
+              if (tooltip) tooltip.style.visibility = "hidden";
+              if (tooltip) tooltip.style.opacity = "0";
+            }}
           >
             i
           </span>
-        </h3>
-        <ul>
-          {topContributors.map((user) => (
-            <li key={user.name}>
-              {user.name} 🔥 {user.currentStreak} {user.currentStreak === 1 ? "week" : "weeks"} streak ({user.count})
-            </li>
-          ))}
-        </ul>
-      </div>
-
-      {/* Render list of top repositories by activity count */}
-      <div>
-        <h3>Top Repositories</h3>
-        <ul>
-          {topRepos.map((repo) => (
-            <li key={repo.name}>
-              {repo.name} ({repo.count})
-            </li>
-          ))}
-        </ul>
-      </div>
+
+          <span
+            style={{
+              visibility: "hidden",
+              opacity: 0,
+              transition: "opacity 0.2s ease",
+              position: "absolute",
+              top: "28px",
+              left: "50%",
+              transform: "translateX(-50%)",
+              backgroundColor: "#222",
+              color: "#fff",
+              padding: "8px 10px",
+              borderRadius: "6px",
+              fontSize: "12px",
+              width: "260px",
+              zIndex: 1000,
+              boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
+              textAlign: "left"
+            }}
+          >
+            A streak increases for every consecutive 7-day period where a user closes at least 3 issues. Streak resets if threshold is not met.
+          </span>
+        </span>
+      </h3>
+        
+      <ul>
+        {topContributors.map((user) => (
+          <li key={user.name}>
+            {user.name} 🔥 {user.currentStreak}{" "}
+            {user.currentStreak === 1 ? "week" : "weeks"} streak ({user.count})
+          </li>
+        ))}
+      </ul>
+    </div>
+
+    {/* Render list of top repositories by activity count */}
+    <div>
+      <h3>Top Repositories</h3>
+      <ul>
+        {topRepos.map((repo) => (
+          <li key={repo.name}>
+            {repo.name} ({repo.count})
+          </li>
+        ))}
+      </ul>
     </div>
+  </div>
   );
 };
 

Frontend/src/features/home/routes/Home.jsx

@@ -50,7 +50,7 @@ export const Home = () => {
                 <span
                   tabIndex="0"
                   aria-label="Leaderboard streak info"
-                  title="A streak increases for every consecutive 7-day period where a user closes at least 1 issue. Streak resets if threshold is not met."
+                  title="A streak increases for every consecutive 7-day period where a user closes at least 3 issues. Streak resets if threshold is not met."
                   style={{
                     cursor: "pointer",
                     border: "1px solid black",