Show Title Unlock Criteria on Hover #5
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR adds tooltip functionality to display title descriptions when users hover over equipped titles in both the Leaderboard and ProfileModal components. The implementation uses fixed positioning with JavaScript to dynamically calculate tooltip placement.
- Tooltip support added for title badges on hover
- Manual tooltip positioning implemented via
onMouseEnterhandlers - CSS styling added for tooltips with consistent theming across components
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| client/src/components/ProfileModal.jsx | Refactored title display logic to show tooltips with descriptions when hovering over equipped titles |
| client/src/components/ProfileModal.css | Added CSS styles for title tooltips with fixed positioning and hover effects |
| client/src/components/Leaderboard.jsx | Added tooltip functionality to leaderboard title badges |
| client/src/components/Leaderboard.css | Added shared tooltip styles and overflow-x visibility for tooltips |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| (() => { | ||
| const equippedTitle = userTitles.find(t => String(t.id) === String(displayUser.selected_title_id)); | ||
| return ( | ||
| <span | ||
| className="displayed-title-name title-with-tooltip" | ||
| onMouseEnter={(e) => { | ||
| const tooltip = e.currentTarget.querySelector('.title-tooltip'); | ||
| if (tooltip) { | ||
| const rect = e.currentTarget.getBoundingClientRect(); | ||
| tooltip.style.top = `${rect.bottom + 8}px`; | ||
| tooltip.style.left = `${rect.left}px`; | ||
| } | ||
| }} | ||
| > | ||
| {equippedTitle.name} | ||
| {equippedTitle.description && ( | ||
| <span className="title-tooltip">{equippedTitle.description}</span> | ||
| )} | ||
| </span> | ||
| ); | ||
| })() |
There was a problem hiding this comment.
This tooltip positioning logic is duplicated three times across ProfileModal.jsx and Leaderboard.jsx. Consider extracting it into a reusable component or custom hook (e.g., TitleWithTooltip) to reduce code duplication and improve maintainability.
| onMouseEnter={(e) => { | ||
| const tooltip = e.currentTarget.querySelector('.title-tooltip'); | ||
| if (tooltip) { | ||
| const rect = e.currentTarget.getBoundingClientRect(); | ||
| tooltip.style.top = `${rect.bottom + 8}px`; | ||
| tooltip.style.left = `${rect.left}px`; | ||
| } | ||
| }} |
There was a problem hiding this comment.
The tooltip positioning logic runs on every mouse enter event. When the tooltip is hidden (visibility: hidden in CSS), getBoundingClientRect() still triggers a layout recalculation. Consider debouncing or using CSS-only positioning if possible to avoid unnecessary layout calculations on hover.
| width: 100%; | ||
| flex-grow: 1; | ||
| overflow-y: auto; | ||
| overflow-x: visible; |
There was a problem hiding this comment.
Setting overflow-x to visible while overflow-y is auto (line 61) can cause unexpected behavior in some browsers, as they may force both overflow properties to the same value. Consider using a wrapper element for the tooltip or alternative positioning strategies to avoid potential cross-browser issues.
| line-height: 1.4; | ||
| white-space: normal; | ||
| word-wrap: break-word; | ||
| transform: translateY(8px); |
There was a problem hiding this comment.
The tooltip in Leaderboard.css uses transform: translateY(8px) (line 205) while ProfileModal.css tooltips don't use this transform property, despite both positioning tooltips 8px below the element. This inconsistency means tooltips appear slightly different between components. Consider standardizing the approach.
| transform: translateY(8px); |
adding setup instructions in readme
Summary
Implementation Notes
.title-tooltip