shcizo/pdga-rating
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: std-dev tooltip positioned incorrectly and lacks discoverability #19

New Issue
Closed
opened 2026-05-22 22:21:03 +02:00 by shcizo · 0 comments
shcizo commented 2026-05-22 22:21:03 +02:00
Owner
Copy Link
Copy Source

Beskrivning

Tooltipen som visar "Rating Range: 890 - 948 (±29)" hamnar helt fel
på sidan — istället för att följa muspekaren vid hover dyker den upp
mitt i tabellen, oankrad till hover-elementet. Dessutom är det oklart
för användaren att tooltipen ens finns eller vad den visar.

Tooltipen visar predikterad ratings konfidensintervall baserat på
standardavvikelsen från calculatePredictedRating() i
src/services/rating-calculator.js — alltså spridningen i spelarens
senaste rundresultat.

Teknisk orsak

CSS och JS är inkonsekventa kring positioneringsstrategi:

  • public/css/players.css:99-113 — .std-dev-tooltip använder
    position: absolute
  • public/js/tooltips.js:5-6, 10-11 — JS sätter left/top med
    e.clientX/e.clientY (viewport-koordinater)

position: absolute positionerar relativt närmaste positionerade
förfader. Efter mobilredesignen (commit cc9d8eb) ändrades
.rating-stack från vertikal till horisontell flexbox, och någonstans
i den nya layouten finns nu en positioneringskontext (eller transform)
som bryter den tidigare implicita kopplingen till <body>.

Jämför med .chart-tooltip (players.css:83) som korrekt använder
position: fixed — den fungerar fortfarande.

Markup-kontext

Tooltipen finns på två ställen per spelarrad i
views/partials/ratings-table.ejs:70, 81:

  • #tooltip-rating-<pdga> triggas av hover på .rating-value (nuvarande rating)
  • #tooltip-stddev-<pdga> triggas av hover på .predicted-value (predikterad rating)

Båda visar samma Rating Range-text baserad på samma data-stddev.

Förslag till lösning

1. Fixa positioneringen (bugfix)

Ändra .std-dev-tooltip från position: absolute till
position: fixed i public/css/players.css:100, så den matchar
viewport-koordinaterna som JS:en redan beräknar (samma mönster som
.chart-tooltip använder).

2. Gör tooltipen upptäckbar (UX)

Idag finns ingen visuell ledtråd att rating-talet är hovrbart. Förslag:

  • Lägg till en diskret hover-stil på .rating-value /
    .predicted-value (t.ex. cursor: help + svag understrykning)
  • Överväg att ersätta hover-tooltipen med ett litet info-element
    (t.ex. ±29 synligt bredvid predikterad rating) — då behövs ingen
    tooltip alls för det primära värdet
  • Bestäm om båda tooltipsen behövs eller om en räcker (de visar
    samma info)

3. Tydligare formulering

"Rating Range: 890 - 948 (±29)" är kryptiskt. Förslag på alternativ
formulering att diskutera:

  • "Konfidensintervall: 890–948 (σ=29)"
  • "Spridning i senaste ronder: ±29 poäng"
  • Tooltip-rubrik som förklarar vad spridningen betyder för
    rating-prediktionen

Scope

Ingår:

  • Fix av position: absolute → position: fixed i .std-dev-tooltip
  • Visuell indikator att värdet är hovrbart (eller alternativ
    presentation av ±-värdet)
  • Tydligare label/formulering av tooltipens innehåll
  • Beslut om en eller två tooltips per rad

Ingår inte:

  • Översyn av andra tooltips (.chart-tooltip etc.)
  • Förändringar i stdDev-beräkningen
  • Mobile touch-stöd för tooltipen (egen issue om aktuellt)
## Beskrivning Tooltipen som visar "Rating Range: 890 - 948 (±29)" hamnar helt fel på sidan — istället för att följa muspekaren vid hover dyker den upp mitt i tabellen, oankrad till hover-elementet. Dessutom är det oklart för användaren att tooltipen ens finns eller vad den visar. Tooltipen visar predikterad ratings konfidensintervall baserat på standardavvikelsen från `calculatePredictedRating()` i `src/services/rating-calculator.js` — alltså spridningen i spelarens senaste rundresultat. ## Teknisk orsak CSS och JS är inkonsekventa kring positioneringsstrategi: - `public/css/players.css:99-113` — `.std-dev-tooltip` använder `position: absolute` - `public/js/tooltips.js:5-6, 10-11` — JS sätter `left`/`top` med `e.clientX`/`e.clientY` (viewport-koordinater) `position: absolute` positionerar relativt närmaste positionerade förfader. Efter mobilredesignen (commit `cc9d8eb`) ändrades `.rating-stack` från vertikal till horisontell flexbox, och någonstans i den nya layouten finns nu en positioneringskontext (eller `transform`) som bryter den tidigare implicita kopplingen till `<body>`. Jämför med `.chart-tooltip` (`players.css:83`) som korrekt använder `position: fixed` — den fungerar fortfarande. ## Markup-kontext Tooltipen finns på två ställen per spelarrad i `views/partials/ratings-table.ejs:70, 81`: - `#tooltip-rating-<pdga>` triggas av hover på `.rating-value` (nuvarande rating) - `#tooltip-stddev-<pdga>` triggas av hover på `.predicted-value` (predikterad rating) Båda visar samma `Rating Range`-text baserad på samma `data-stddev`. ## Förslag till lösning ### 1. Fixa positioneringen (bugfix) Ändra `.std-dev-tooltip` från `position: absolute` till `position: fixed` i `public/css/players.css:100`, så den matchar viewport-koordinaterna som JS:en redan beräknar (samma mönster som `.chart-tooltip` använder). ### 2. Gör tooltipen upptäckbar (UX) Idag finns ingen visuell ledtråd att rating-talet är hovrbart. Förslag: - Lägg till en diskret hover-stil på `.rating-value` / `.predicted-value` (t.ex. `cursor: help` + svag understrykning) - Överväg att ersätta hover-tooltipen med ett litet info-element (t.ex. `±29` synligt bredvid predikterad rating) — då behövs ingen tooltip alls för det primära värdet - Bestäm om båda tooltipsen behövs eller om en räcker (de visar samma info) ### 3. Tydligare formulering "Rating Range: 890 - 948 (±29)" är kryptiskt. Förslag på alternativ formulering att diskutera: - "Konfidensintervall: 890–948 (σ=29)" - "Spridning i senaste ronder: ±29 poäng" - Tooltip-rubrik som förklarar vad spridningen betyder för rating-prediktionen ## Scope **Ingår:** - Fix av `position: absolute` → `position: fixed` i `.std-dev-tooltip` - Visuell indikator att värdet är hovrbart (eller alternativ presentation av ±-värdet) - Tydligare label/formulering av tooltipens innehåll - Beslut om en eller två tooltips per rad **Ingår inte:** - Översyn av andra tooltips (`.chart-tooltip` etc.) - Förändringar i stdDev-beräkningen - Mobile touch-stöd för tooltipen (egen issue om aktuellt)
shcizo added the bugenhancement labels 2026-05-22 22:21:03 +02:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
Something isn't working
 documentation
Improvements or additions to documentation
 duplicate
This issue or pull request already exists
 enhancement
New feature or request
 good first issue
Good for newcomers
 help wanted
Extra attention is needed
 invalid
This doesn't seem right
 question
Further information is requested
 wontfix
This will not be worked on
No Label bug enhancement
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
shcizo (Samuel Enocsson)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: shcizo/pdga-rating#19
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?