localhorst/LiXX_Cell_Pack_Matcher
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity

add tooltip

Browse Source
This commit is contained in:
Hendrik Schutter
2025-12-20 21:06:05 +01:00
parent 12ffc48ffc
commit 914add4b05
2 changed files with 147 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
css/styles.css
View File

@ -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%;
}
}

49
index.html
View File

@ -199,21 +199,60 @@
<!-- Results Summary -->
<div class="results-summary" id="results-summary">
<div class="result-metric">
<div class="result-metric" tabindex="0" data-tooltip="match-score">
<span class="metric-value" id="result-score">-</span>
<span class="metric-label">Match Score</span>
<div class="metric-tooltip">
<strong>Match Score</strong>
<p>Combined score from capacity and IR variance, weighted by your settings.</p>
<div class="tooltip-scale">
<span class="scale-good">&lt; 0.5 = Excellent</span>
<span class="scale-ok">0.5 - 2.0 = Good</span>
<span class="scale-bad">&gt; 2.0 = Poor</span>
</div>
<p class="tooltip-hint">Lower is better</p>
</div>
</div>
<div class="result-metric">
<div class="result-metric" tabindex="0" data-tooltip="cap-cv">
<span class="metric-value" id="result-cap-variance">-</span>
<span class="metric-label">Capacity CV%</span>
<div class="metric-tooltip">
<strong>Capacity Coefficient of Variation</strong>
<p>Measures how evenly matched the total capacity of each parallel group is. CV = (σ / μ) ×
100%</p>
<div class="tooltip-scale">
<span class="scale-good">&lt; 1% = Excellent</span>
<span class="scale-ok">1 - 3% = Acceptable</span>
<span class="scale-bad">&gt; 3% = Poor balance</span>
</div>
<p class="tooltip-hint">Lower is better – ensures even discharge across series groups</p>
</div>
</div>
<div class="result-metric">
<div class="result-metric" tabindex="0" data-tooltip="ir-cv">
<span class="metric-value" id="result-ir-variance">-</span>
<span class="metric-label">IR CV%</span>
<div class="metric-tooltip">
<strong>Internal Resistance Variation</strong>
<p>Average variation of internal resistance within parallel groups. High mismatch causes
uneven current distribution.</p>
<div class="tooltip-scale">
<span class="scale-good">&lt; 5% = Excellent</span>
<span class="scale-ok">5 - 15% = Acceptable</span>
<span class="scale-bad">&gt; 20% = Risk of 40% lifetime reduction</span>
</div>
<p class="tooltip-hint">Lower is better – critical for high-drain applications</p>
</div>
</div>
<div class="result-metric">
<div class="result-metric" tabindex="0" data-tooltip="pack-cap">
<span class="metric-value" id="result-pack-capacity">-</span>
<span class="metric-label">Pack Capacity</span>
<div class="metric-tooltip">
<strong>Effective Pack Capacity</strong>
<p>The usable capacity of your pack, limited by the smallest parallel group (weakest link).
</p>
<p>Formula: min(group capacities)</p>
<p class="tooltip-hint">Higher is better – well-matched cells maximize this value</p>
</div>
</div>
</div>
@ -277,7 +316,7 @@
<a href="https://git.mosad.xyz/localhorst/LiXX_Cell_Pack_Matcher" target="_blank" rel="noopener">Git</a>
·
Based on research by
<a href="https://doi.org/10.1016/j.jpowsour.2013.11.064" target="_blank" rel="noopener">Shi et al., 2013</a>
<a href="https://doi.org/10.1016/j.jpowsour.2013.11.064" target="_blank" rel="noopener">Wang et al., 2013</a>
</p>
<p class="disclaimer">
This tool is for educational purposes. Always consult professional guidance for battery pack assembly.