diff --git a/css/styles.css b/css/styles.css index 144330c..9aeeb7e 100644 --- a/css/styles.css +++ b/css/styles.css @@ -923,4 +923,107 @@ kbd { .warning-banner { border: 2px solid #f59e0b; } +} + +/* -------------------------------------------------------------------------- + Metric Tooltips + -------------------------------------------------------------------------- */ +.result-metric { + position: relative; + cursor: help; +} + +.metric-tooltip { + visibility: hidden; + opacity: 0; + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + margin-bottom: 12px; + padding: var(--space-md); + width: 280px; + background: var(--bg-primary); + border: 1px solid var(--border-color); + border-radius: var(--radius-md); + font-size: 0.8rem; + text-align: left; + z-index: 100; + box-shadow: var(--shadow-lg); + transition: opacity var(--transition-fast), visibility var(--transition-fast); +} + +.metric-tooltip::after { + content: ''; + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + border: 8px solid transparent; + border-top-color: var(--border-color); +} + +.result-metric:hover .metric-tooltip, +.result-metric:focus .metric-tooltip, +.result-metric:active .metric-tooltip { + visibility: visible; + opacity: 1; +} + +.metric-tooltip strong { + display: block; + margin-bottom: var(--space-sm); + color: var(--accent); + font-size: 0.85rem; +} + +.metric-tooltip p { + margin: 0 0 var(--space-sm); + color: var(--text-secondary); + line-height: 1.4; +} + +.tooltip-scale { + display: flex; + flex-direction: column; + gap: 2px; + margin: var(--space-sm) 0; + padding: var(--space-sm); + background: var(--bg-tertiary); + border-radius: var(--radius-sm); + font-family: var(--font-mono); + font-size: 0.7rem; +} + +.scale-good { + color: var(--success); +} + +.scale-ok { + color: var(--warning); +} + +.scale-bad { + color: var(--danger); +} + +.tooltip-hint { + margin-top: var(--space-sm); + padding-top: var(--space-sm); + border-top: 1px solid var(--border-color); + font-style: italic; + color: var(--text-muted); +} + +/* Mobile: tap to show tooltip */ +@media (max-width: 640px) { + .metric-tooltip { + width: 240px; + left: 0; + transform: translateX(0); + } + + .metric-tooltip::after { + left: 20%; + } } \ No newline at end of file diff --git a/index.html b/index.html index 0d0f601..b8e608c 100644 --- a/index.html +++ b/index.html @@ -199,21 +199,60 @@
Combined score from capacity and IR variance, weighted by your settings.
+Lower is better
+Measures how evenly matched the total capacity of each parallel group is. CV = (σ / μ) × + 100%
+Lower is better – ensures even discharge across series groups
+Average variation of internal resistance within parallel groups. High mismatch causes + uneven current distribution.
+Lower is better – critical for high-drain applications
+The usable capacity of your pack, limited by the smallest parallel group (weakest link). +
+Formula: min(group capacities)
+Higher is better – well-matched cells maximize this value
+This tool is for educational purposes. Always consult professional guidance for battery pack assembly.