잔여 시간 근거를 커스텀 팝오버로 표시

public/assets/app.js

@@ -32,6 +32,7 @@
         statusBatteryVoltage: $('#statusBatteryVoltage'),
         statusBatterySoc: $('#statusBatterySoc'),
         statusBatteryRemaining: $('#statusBatteryRemaining'),
+        batteryRuntimeTooltip: $('#batteryRuntimeTooltip'),
         spikeLogList: $('#spikeLogList'),
         haNotifyList: $('#haNotifyList'),
         customServiceList: $('#customServiceList'),
@@ -75,6 +76,8 @@
         rebootRequesting: false,
         lang: 'en',
         theme: 'dark',
+        batteryTooltipOpen: false,
+        batteryTooltipText: '',
     };
 
     const storageKeys = {
@@ -718,6 +721,62 @@
         return lines.join('\n');
     }
 
+    function positionBatteryTooltip() {
+        if (!state.batteryTooltipOpen || !els.statusBatteryRemaining || !els.batteryRuntimeTooltip) {
+            return;
+        }
+
+        const targetRect = els.statusBatteryRemaining.getBoundingClientRect();
+        const tip = els.batteryRuntimeTooltip;
+        const margin = 14;
+        tip.style.left = '0px';
+        tip.style.top = '0px';
+        const tipRect = tip.getBoundingClientRect();
+        let left = targetRect.left;
+        let top = targetRect.bottom + 10;
+
+        if (left + tipRect.width > window.innerWidth - margin) {
+            left = window.innerWidth - tipRect.width - margin;
+        }
+        if (left < margin) {
+            left = margin;
+        }
+        if (top + tipRect.height > window.innerHeight - margin) {
+            top = targetRect.top - tipRect.height - 10;
+        }
+        if (top < margin) {
+            top = margin;
+        }
+
+        tip.style.left = `${Math.round(left)}px`;
+        tip.style.top = `${Math.round(top)}px`;
+    }
+
+    function updateBatteryTooltip(text = state.batteryTooltipText) {
+        state.batteryTooltipText = text || '';
+        if (!els.batteryRuntimeTooltip) return;
+
+        els.batteryRuntimeTooltip.textContent = state.batteryTooltipText || '-';
+        if (state.batteryTooltipOpen) {
+            requestAnimationFrame(positionBatteryTooltip);
+        }
+    }
+
+    function showBatteryTooltip() {
+        if (!els.batteryRuntimeTooltip) return;
+        state.batteryTooltipOpen = true;
+        els.batteryRuntimeTooltip.dataset.open = '1';
+        els.batteryRuntimeTooltip.setAttribute('aria-hidden', 'false');
+        updateBatteryTooltip();
+    }
+
+    function hideBatteryTooltip() {
+        if (!els.batteryRuntimeTooltip) return;
+        state.batteryTooltipOpen = false;
+        delete els.batteryRuntimeTooltip.dataset.open;
+        els.batteryRuntimeTooltip.setAttribute('aria-hidden', 'true');
+    }
+
     function renderTop(data) {
         setText(els.updated, data.generated_at || '-');
         setText(els.temp, Number(data.system?.temp_c || 0).toFixed(1) + '°C');
@@ -912,7 +971,8 @@
         setText(els.statusBatterySoc, battery.percent === null || battery.percent === undefined ? '-' : `${Number(battery.percent).toFixed(2)}%`);
         setText(els.statusBatteryRemaining, battery.remaining?.display || '-');
         if (els.statusBatteryRemaining) {
-            els.statusBatteryRemaining.title = batteryRemainingTitle(battery.remaining);
+            els.statusBatteryRemaining.removeAttribute('title');
+            updateBatteryTooltip(batteryRemainingTitle(battery.remaining));
         }
         if (els.statusUsers) {
             const names = String(activeUsers.names || '').trim();
@@ -1684,6 +1744,12 @@
     els.dmesgToggle?.addEventListener('click', () => {
         setDmesgOpen(!state.dmesgOpen);
     });
+    els.statusBatteryRemaining?.addEventListener('mouseenter', showBatteryTooltip);
+    els.statusBatteryRemaining?.addEventListener('mouseleave', hideBatteryTooltip);
+    els.statusBatteryRemaining?.addEventListener('focus', showBatteryTooltip);
+    els.statusBatteryRemaining?.addEventListener('blur', hideBatteryTooltip);
+    window.addEventListener('resize', positionBatteryTooltip);
+    window.addEventListener('scroll', positionBatteryTooltip, true);
     [els.secondaryChartDetails, els.processDetails, els.diagnosticDetails].forEach(node => {
         node?.addEventListener('toggle', resizeChartsSoon);
     });