fix: reposition std-dev tooltip and surface ±-spread inline (#19)

public/css/players.css

@@ -14,6 +14,7 @@
 
 .rating-value {
     font-variant-numeric: tabular-nums;
+    cursor: help;
 }
 
 .pdga-number {
@@ -46,6 +47,13 @@
     font-variant-numeric: tabular-nums;
 }
 
+.std-dev-inline {
+    color: var(--text-muted);
+    font-size: 11px;
+    font-variant-numeric: tabular-nums;
+    margin-left: 4px;
+}
+
 .difference {
     font-weight: 600;
 }
@@ -97,7 +105,7 @@
 /* ── Tooltips ─────────────────────────────────── */
 
 .std-dev-tooltip {
-    position: absolute;
+    position: fixed;
     background: var(--navy-900);
     color: var(--text-inverse);
     padding: 6px 10px;
@@ -107,7 +115,7 @@
     pointer-events: none;
     z-index: 10000;
     display: none;
-    white-space: nowrap;
+    white-space: pre;
     box-shadow: var(--shadow-lg);
     font-weight: 400;
 }

public/js/players.js

@@ -68,16 +68,6 @@ function setupAfterTableSwap() {
 }
 
 function initRatingsTooltips() {
-    document.querySelectorAll('.predicted-value').forEach(span => {
-        const pdgaNumber = span.dataset.pdga;
-        const stdDev = span.dataset.stddev;
-        const tooltip = document.getElementById(`tooltip-stddev-${pdgaNumber}`);
-
-        if (stdDev && tooltip) {
-            setupTooltip(span, tooltip, () => `Standard Deviation: \u00b1${stdDev}`);
-        }
-    });
-
     document.querySelectorAll('.rating-value').forEach(span => {
         const pdgaNumber = span.dataset.pdga;
         const rating = parseInt(span.dataset.rating);
@@ -87,7 +77,7 @@ function initRatingsTooltips() {
         if (rating && stdDev && tooltip) {
             const minRating = rating - stdDev;
             const maxRating = rating + stdDev;
-            setupTooltip(span, tooltip, () => `Rating Range: ${minRating} - ${maxRating} (\u00b1${stdDev})`);
+            setupTooltip(span, tooltip, () => `Spridning: \u00b1${stdDev} po\u00e4ng\nIntervall: ${minRating}\u2013${maxRating}`);
         }
     });
 }
@@ -199,7 +189,7 @@ async function refreshPlayer(pdgaNumber) {
                 if (rating && stdDev && tooltip) {
                     const minRating = rating - stdDev;
                     const maxRating = rating + stdDev;
-                    replaceWithTooltip(ratingValue, tooltip, () => `Rating Range: ${minRating} - ${maxRating} (\u00b1${stdDev})`);
+                    replaceWithTooltip(ratingValue, tooltip, () => `Spridning: \u00b1${stdDev} po\u00e4ng\nIntervall: ${minRating}\u2013${maxRating}`);
                 }
             }
 
@@ -233,9 +223,15 @@ async function refreshRoundHistory(pdgaNumber) {
                     predictedValue.textContent = data.predictedRating || 'N/A';
                     predictedValue.dataset.stddev = data.stdDev || '';
 
-                    const tooltip = document.getElementById(`tooltip-stddev-${pdgaNumber}`);
+                    const predStack = predictedValue.closest('.pred-stack');
-                    if (data.stdDev && tooltip) {
+                    const stdDevInline = predStack ? predStack.querySelector('.std-dev-inline') : null;
-                        replaceWithTooltip(predictedValue, tooltip, () => `Standard Deviation: \u00b1${data.stdDev}`);
+                    if (stdDevInline) {
+                        if (data.stdDev) {
+                            stdDevInline.textContent = '\u00b1' + data.stdDev;
+                            stdDevInline.style.display = '';
+                        } else {
+                            stdDevInline.style.display = 'none';
+                        }
                     }
                 }
             }
@@ -253,7 +249,7 @@ async function refreshRoundHistory(pdgaNumber) {
                 if (rating && stdDev && ratingTooltip) {
                     const minRating = rating - stdDev;
                     const maxRating = rating + stdDev;
-                    replaceWithTooltip(ratingValue, ratingTooltip, () => `Rating Range: ${minRating} - ${maxRating} (\u00b1${stdDev})`);
+                    replaceWithTooltip(ratingValue, ratingTooltip, () => `Spridning: \u00b1${stdDev} po\u00e4ng\nIntervall: ${minRating}\u2013${maxRating}`);
                 }
             }
         }

views/partials/ratings-table.ejs

@@ -74,11 +74,11 @@ function renderSparkline(values, opts) {
                     <div class="pred-stack">
                         <span class="predicted-value pred-num mono" data-stddev="<%= player.stdDev || '' %>" data-pdga="<%= player.pdgaNumber %>"><%= player.predictedRating %></span>
                         <%- include('delta-pill', { value: player.deltaPredicted, extraClass: 'delta-predicted-pill' }) %>
+                        <% if (player.stdDev) { %><span class="std-dev-inline mono">±<%= player.stdDev %></span><% } %>
                     </div>
                     <% } else { %>
                     <span class="rating-pending">—</span>
                     <% } %>
-                    <div class="std-dev-tooltip" id="tooltip-stddev-<%= player.pdgaNumber %>"></div>
                 </td>
                 <td class="col-actions cell-actions" onclick="event.stopPropagation()">
                     <button class="icon-btn refresh-icon" onclick="refreshPlayerData(<%= player.pdgaNumber %>)" title="Refresh rating + prediction" aria-label="Refresh rating and prediction">