[GOOD FIRST ISSUE] Add descriptive tooltips to StreakTracker stat cards

[Priyanshu-byte-coder]

Summary

StreakTracker shows Current Streak, Longest Streak, Active Days with no explanation. New users don't know the difference.

Expected Behaviour

Each stat card has a small info icon that shows a tooltip on hover/focus:

• Current Streak: 'Consecutive days with at least 1 commit, ending today'
• Longest Streak: 'Your best consecutive-day run of all time'
• Active Days: 'Total days with at least 1 commit in the selected period'

Implementation Notes

• Use title attribute or Tailwind CSS tooltip div
• Must work with keyboard focus, not hover-only
• Use heroicons information-circle SVG (already in codebase)
• No new npm dependencies

GSSoC Info

• Difficulty: Beginner — 20 pts
• Area: Accessibility / UI

[srinidhi-2006-bit]

Hi @Priyanshu-byte-coder

I’m contributing under GSSoC’26 and I would like to work on this issue.

I understand that the task involves improving the usability and accessibility of the StreakTracker stat cards by adding descriptive tooltips and accessible info indicators to help users better understand each metric. I’ll ensure the tooltip behavior works properly for both mouse and keyboard interactions while keeping the implementation lightweight and visually consistent with the existing UI.

I’ll also carefully follow the current design patterns and accessibility best practices without introducing unnecessary dependencies.

Looking forward to contributing to DevTrack.

[github-actions]

✅ Closed as completed!

If DevTrack has been useful, a ⭐ star on the repo helps the project grow and reach more developers.

[srinidhi-2006-bit]

Hi @Priyanshu-byte-coder

Thank you for merging the PR.

I noticed that the gssoc:approved label is currently missing from the PR. Could you please add it so the contribution can be counted under GSSoC'26?

Thank you!