bar graph fix

app/components/PowerCard.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { type TapoDevice } from "../lib/getPower";
+import HelpTooltip from "./HelpTooltip";
 
 interface PowerCardProps {
 	device: TapoDevice | null;
@@ -45,17 +46,19 @@ export default function PowerCard({ device, label, delay = 0, toggling = false,
 							{device.on ? "On" : "Off"}
 						</span>
 						{onToggle && (
-							<button
-								onClick={() => onToggle(!device.on)}
-								disabled={toggling}
-								className={`text-[0.7rem] font-medium px-2 py-0.5 rounded-full border transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${
-									device.on
-										? "border-red-500/20 text-red-400 hover:bg-red-500/10"
-										: "border-green/20 text-green hover:bg-green/10"
-								}`}
-							>
-								{toggling ? "···" : device.on ? "Turn off" : "Turn on"}
-							</button>
+							<HelpTooltip text="Remotely turn this smart plug on or off.">
+								<button
+									onClick={() => onToggle(!device.on)}
+									disabled={toggling}
+									className={`text-[0.7rem] font-medium px-2 py-0.5 rounded-full border transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${
+										device.on
+											? "border-red-500/20 text-red-400 hover:bg-red-500/10"
+											: "border-green/20 text-green hover:bg-green/10"
+									}`}
+								>
+									{toggling ? "···" : device.on ? "Turn off" : "Turn on"}
+								</button>
+							</HelpTooltip>
 						)}
 					</div>
 				) : null}
@@ -70,7 +73,7 @@ export default function PowerCard({ device, label, delay = 0, toggling = false,
 						<span className="text-base text-foreground-sec font-medium">W</span>
 					</div>
 					<span className="text-[0.7rem] text-foreground-sec mt-1 truncate">
-						{device.alias} · {device.model}
+						{device.model} · {device.ip}
 					</span>
 
 					<div className="h-[3px] bg-secondary rounded-full mt-4 overflow-hidden">