diff --git a/src/components/usage/ServiceHealthCard.tsx b/src/components/usage/ServiceHealthCard.tsx
index c4e82c9..f7f94f3 100644
--- a/src/components/usage/ServiceHealthCard.tsx
+++ b/src/components/usage/ServiceHealthCard.tsx
@@ -83,7 +83,11 @@ export function ServiceHealthCard({ usage, loading }: ServiceHealthCardProps) {
   }, [activeTooltip]);
 
   const buildTooltipState = useCallback(
-    (idx: number, anchorEl: HTMLDivElement): ActiveTooltipState => {
+    (idx: number, anchorEl: HTMLDivElement | null): ActiveTooltipState | null => {
+      if (!anchorEl || !anchorEl.isConnected) {
+        return null;
+      }
+
       const rect = anchorEl.getBoundingClientRect();
       const centerX = rect.left + rect.width / 2;
 
@@ -161,9 +165,8 @@ export function ServiceHealthCard({ usage, loading }: ServiceHealthCardProps) {
     (e: React.PointerEvent<HTMLDivElement>, idx: number) => {
       if (e.pointerType === 'touch') {
         e.preventDefault();
-        setActiveTooltip((prev) =>
-          prev?.idx === idx ? null : buildTooltipState(idx, e.currentTarget)
-        );
+        const anchorEl = e.currentTarget;
+        setActiveTooltip((prev) => (prev?.idx === idx ? null : buildTooltipState(idx, anchorEl)));
       }
     },
     [buildTooltipState]