TrackerBattery battery level tooltip if not shown

Author: sctanf

gui/src/components/tracker/TrackerBattery.tsx

@@ -2,6 +2,7 @@ import { useConfig } from '@/hooks/config';
 import { useLocaleConfig } from '@/i18n/config';
 import { BatteryIcon } from '@/components/commons/icon/BatteryIcon';
 import { Typography } from '@/components/commons/Typography';
+import { Tooltip } from '@/components/commons/Tooltip';
 
 export function TrackerBattery({
   value,
@@ -36,36 +37,49 @@ export function TrackerBattery({
   const showVoltage = moreInfo && voltage && debug;
 
   return (
-    <div className="flex gap-2">
-      <div className="flex flex-col justify-around">
-        <BatteryIcon value={value} disabled={disabled} charging={charging} />
-      </div>
-      {((!charging || showVoltage) && (
-        <div className="w-15">
-          {!charging && runtime != null && runtime > 0 && (
-            <Typography color={textColor}>
-              {(runtime / BigInt(3600000000)).toString() +
-                'h ' +
-                ((runtime % BigInt(3600000000)) / BigInt(60000000)).toString() +
-                'min'}
-            </Typography>
-          )}
-          {!charging && (!runtime || debug) && (
-            <Typography color={textColor}>
-              {percentFormatter.format(value)}
-            </Typography>
-          )}
-          {showVoltage && (
-            <Typography color={textColor}>
-              {voltageFormatter.format(voltage)}V
-            </Typography>
-          )}
+    <Tooltip
+      disabled={!charging && (!runtime || debug)}
+      preferedDirection="left"
+      content={
+        <div className="flex gap-1 items-center">
+          <Typography>{percentFormatter.format(value)}</Typography>
         </div>
-      )) || (
-        <div className="flex flex-col justify-center w-15">
-          <div className="w-5 h-1 bg-background-30 rounded-full" />
+      }
+    >
+      <div className="flex gap-2">
+        <div className="flex flex-col justify-around">
+          <BatteryIcon value={value} disabled={disabled} charging={charging} />
         </div>
-      )}
-    </div>
+        {((!charging || showVoltage) && (
+          <div className="w-15">
+            {!charging && runtime != null && runtime > 0 && (
+              <Typography color={textColor}>
+                {(runtime / BigInt(3600000000)).toString() +
+                  'h ' +
+                  (
+                    (runtime % BigInt(3600000000)) /
+                    BigInt(60000000)
+                  ).toString() +
+                  'min'}
+              </Typography>
+            )}
+            {!charging && (!runtime || debug) && (
+              <Typography color={textColor}>
+                {percentFormatter.format(value)}
+              </Typography>
+            )}
+            {showVoltage && (
+              <Typography color={textColor}>
+                {voltageFormatter.format(voltage)}V
+              </Typography>
+            )}
+          </div>
+        )) || (
+          <div className="flex flex-col justify-center w-15">
+            <div className="w-5 h-1 bg-background-30 rounded-full" />
+          </div>
+        )}
+      </div>
+    </Tooltip>
   );
 }