feat(TeamParticipants): add hover roster tooltip

[Eetwalt]

Summary

Adds a hover roster tooltip to collapsed team participant cards, showing the player roster when hovering over the team name on desktop.

• ParticipantControls.lua adds an "Enable hover" switch toggle (hidden on mobile via SCSS)
• Card.lua renders the tooltip header div in Lua using i18n
• i18n/Data.lua adds the participants-hover-roster-label key ("Player roster")
• SCSS handles everything, no javascript needed
• Ensure the main tab always shows even if the active tab is something else

How did you test this change?

dev + devtools

screenrecording-2026-04-24_11-24-07.mp4

[Copilot]

Pull request overview

Adds a desktop-only hover tooltip for collapsed team participant cards to preview the team roster when hovering the team name.

Changes:

• Introduces a new JS module (TeamParticipantCard.js) to show/hide and position the hover roster tooltip.
• Adds a new participant control switch (“Enable hover”) and renders a tooltip header label via i18n.
• Updates SCSS to style the tooltip, support dark mode, and hide non-roster content within the tooltip.

Reviewed changes

Copilot reviewed 7 out of 8 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
stylesheets/commons/TeamParticipantCard.scss	Adds hover-roster switch visibility rules and tooltip styling/behavior.
lua/wikis/commons/Widget/Participants/Team/ParticipantControls.lua	Adds the “Enable hover” switch (analytics-wrapped) for the hover roster feature.
lua/wikis/commons/Widget/Participants/Team/Card.lua	Renders a hidden tooltip header div (i18n) inside the collapsible content.
lua/wikis/commons/I18n/Data.lua	Adds participants-hover-roster-label translation key (“Player roster”).
lua/spec/snapshots/team_participant.png	Updates golden snapshot output for team participant rendering.
javascript/tests/TeamParticipantCard.test.js	Adds basic Jest tests for module registration and safe init behavior.
javascript/commons/TeamParticipantCard.js	Implements hover handlers and tooltip positioning logic.
javascript/Main.js	Ensures the new module is loaded in the JS module list.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[ElectricalBoy]

from quick glance on phone

[Rathoz]

Are you sure it's not possible to do with SCSS only? May require some moving around of html elements, but I think it should be possible.

[Eetwalt]

The show/hide is doable with just css, but positioning the tooltip like designed (centered 12 px under the team name) and adjusting the position if screen size doesn't allow the optimal position.

What are you envisioning with moving html around to make this possible with pure CSS? I'm happy to be wrong to not add js if not needed

[Rathoz]

position: relative
+
position: absolute
top: 12px
left: XXX

would allow for the adjustment.

I don't see a case where screen size would be an issue. Is it always below?

[Eetwalt]

Vertically not, horizontally the tooltip sometimes gets to the edge of the screen when there's long player names (since the horizontal position is center of the name).

If we can do an absolute position always to always be certain amount from the left and grow to the right, then it's doable with scss I believe. I'll discuss with design if there's a specific reason to always have exactly middle

[Eetwalt]

Found a nifty solution with css anchor(), which enabled to position the tooltip to the name instead of the card without javascript.

This solution is now just like designed, which is aligning the tooltip to the left of the team name on compact mode, and on the center on non-compact mode.