Score Breakdown Popup on Hover for Each User

[NandiniJeedimalla-07]

What was added

Added a score tooltip feature to improve user understanding of score values in the score/leaderboard component.

Purpose

The tooltip provides additional contextual information when users hover over or interact with score elements, making the UI more informative and user-friendly.

Changes made

• Implemented tooltip UI for score display
• Added hover-based interaction for desktop users
• Ensured responsive behavior across different screen sizes
• Integrated tooltip with existing score component

Impact

Improves user experience by making score information clearer, more interactive, and easier to understand.

Screenshots

Attached screenshots show the tooltip behavior in both default and hover states.

• Before feature

• After feature

[NandiniJeedimalla-07]

Resolves #20

[jagdish-15]

Thanks for the implementation! A few things I'd like adjusted before merging:

• The hover effect currently seems to be attached to the entire score container rather than just the score text itself. Since the hover area is noticeably larger than the visible text, could you make the trigger area match the score text more closely?

• On mobile screens, the score breakdown tooltip overflows outside the viewport (towards the right side). Please ensure it remains fully visible on smaller devices.
• The tooltip text could be changed from white to a slightly muted/faint green to better match the rest of the UI.
• The border radius feels a bit large. Could you knock it back a few pixels?
• One more UX suggestion: currently the tooltip remains visible when moving the cursor from the score text onto the tooltip itself. Since the tooltip is purely informational and doesn't contain any interactive elements, I think it would be better if it disappeared as soon as the cursor leaves the score text.

[NandiniJeedimalla-07]

yeah sure! I will work on it

[NandiniJeedimalla-07]

Resolves #20
Addressed all requested changes. Let me know if anything else is needed.

[jagdish-15]

One thing I noticed is that the tooltip still remains visible when moving the cursor from the score onto the tooltip itself. Since the tooltip doesn't contain any interactive elements, I'd still prefer it to disappear as soon as the cursor leaves the score text.

Also, the feature is currently quite difficult to discover unless a user accidentally hovers over a score. Do you have any ideas for a subtle visual cue that indicates additional information is available, such as a small info icon or something similar? This isn't a hard requirement from the original issue, but I'd be interested in hearing your thoughts.

[NandiniJeedimalla-07]

One subtle idea could be to add a small downward caret next to each score value, for example:

245 ▾
180 ▾
162 ▾

Many websites use a caret/chevron to indicate that additional information is available on hover or interaction. Since the score column already has an info icon explaining the scoring formula, the caret would specifically suggest that each individual score has its own details available, without adding much visual clutter to the leaderboard.

[jagdish-15]

That sounds like a reasonable and clean approach!

Feel free to go ahead with the caret indicator. Also, please make sure the interaction works well on mobile devices.

Once that's in place, I think we'll be in a good position to merge.

[jagdish-15]

Thanks for working through all the feedback on this one!

I took the liberty of making one small tweak before merging and changed the caret indicator to a > symbol, as I felt it fit the terminal-style theme of the project a bit better. Other than that, the implementation looks great.