diff --git a/src/components/HeartbeatBar.vue b/src/components/HeartbeatBar.vue
index 3a523997a..43406b922 100644
--- a/src/components/HeartbeatBar.vue
+++ b/src/components/HeartbeatBar.vue
@@ -30,11 +30,10 @@
             <div v-if="$root.styleElapsedTime === 'with-line'" class="connecting-line"></div>
             <div>{{ timeSinceLastBeat }}</div>
         </div>
-        
-        
+
         <!-- Custom Tooltip -->
-        <Tooltip 
-            :visible="tooltipVisible" 
+        <Tooltip
+            :visible="tooltipVisible"
             :content="tooltipContent"
             :x="tooltipX"
             :y="tooltipY"
@@ -86,7 +85,7 @@ export default {
             tooltipContent: null,
             tooltipX: 0,
             tooltipY: 0,
-            tooltipPosition: 'below',
+            tooltipPosition: "below",
             tooltipTimeoutId: null,
         };
     },
@@ -369,7 +368,7 @@ export default {
 
             const statusText = {
                 0: "Down",
-                1: "Up", 
+                1: "Up",
                 2: "Pending",
                 3: "Maintenance"
             }[beat.status] || "Unknown";
@@ -396,40 +395,40 @@ export default {
             // Small delay for better UX
             this.tooltipTimeoutId = setTimeout(() => {
                 this.tooltipContent = beat;
-                
+
                 // Calculate position relative to viewport
                 const rect = event.target.getBoundingClientRect();
-                
+
                 // Position relative to viewport
                 const x = rect.left + (rect.width / 2);
                 const y = rect.top;
-                
+
                 // Check if tooltip would go off-screen and adjust position
                 const tooltipHeight = 80; // Approximate tooltip height
                 const viewportHeight = window.innerHeight;
                 const spaceAbove = y;
                 const spaceBelow = viewportHeight - y - rect.height;
-                
+
                 if (spaceAbove > tooltipHeight && spaceBelow < tooltipHeight) {
                     // Show above - arrow points down
-                    this.tooltipPosition = 'above';
+                    this.tooltipPosition = "above";
                     this.tooltipY = y - 10;
                 } else {
                     // Show below - arrow points up
-                    this.tooltipPosition = 'below';
+                    this.tooltipPosition = "below";
                     this.tooltipY = y + rect.height + 10;
                 }
-                
+
                 // Ensure tooltip doesn't go off the left or right edge
                 const tooltipWidth = 120; // Approximate tooltip width
                 let adjustedX = x;
-                
-                if (x - tooltipWidth/2 < 10) {
-                    adjustedX = tooltipWidth/2 + 10;
-                } else if (x + tooltipWidth/2 > window.innerWidth - 10) {
-                    adjustedX = window.innerWidth - tooltipWidth/2 - 10;
+
+                if (x - tooltipWidth / 2 < 10) {
+                    adjustedX = tooltipWidth / 2 + 10;
+                } else if (x + tooltipWidth / 2 > window.innerWidth - 10) {
+                    adjustedX = window.innerWidth - tooltipWidth / 2 - 10;
                 }
-                
+
                 this.tooltipX = adjustedX;
                 this.tooltipVisible = true;
             }, 150);
@@ -443,7 +442,7 @@ export default {
                 clearTimeout(this.tooltipTimeoutId);
                 this.tooltipTimeoutId = null;
             }
-            
+
             this.tooltipVisible = false;
             this.tooltipContent = null;
         },
diff --git a/src/components/Tooltip.vue b/src/components/Tooltip.vue
index 8106949b8..e1f025601 100644
--- a/src/components/Tooltip.vue
+++ b/src/components/Tooltip.vue
@@ -1,6 +1,6 @@
 <template>
     <teleport to="body">
-        <div 
+        <div
             v-if="visible && content"
             ref="tooltip"
             class="tooltip-wrapper"
@@ -41,7 +41,7 @@ export default {
             type: Number,
             default: 0
         },
-        /** Y position (viewport coordinates) */  
+        /** Y position (viewport coordinates) */
         y: {
             type: Number,
             default: 0
@@ -49,50 +49,58 @@ export default {
         /** Position relative to target element */
         position: {
             type: String,
-            default: 'below',
-            validator: (value) => ['above', 'below'].includes(value)
+            default: "below",
+            validator: (value) => [ "above", "below" ].includes(value)
         }
     },
     computed: {
         tooltipStyle() {
             return {
-                left: this.x + 'px',
-                top: this.y + 'px',
+                left: this.x + "px",
+                top: this.y + "px",
             };
         },
 
         statusText() {
-            if (!this.content || this.content === 0) return this.$t('Unknown');
-            
+            if (!this.content || this.content === 0) {
+                return this.$t("Unknown");
+            }
+
             const statusMap = {
-                0: this.$t('Down'),
-                1: this.$t('Up'), 
-                2: this.$t('Pending'),
-                3: this.$t('Maintenance')
+                0: this.$t("Down"),
+                1: this.$t("Up"),
+                2: this.$t("Pending"),
+                3: this.$t("Maintenance")
             };
-            return statusMap[this.content.status] || this.$t('Unknown');
+            return statusMap[this.content.status] || this.$t("Unknown");
         },
 
         statusClass() {
-            if (!this.content || this.content === 0) return 'status-empty';
-            
+            if (!this.content || this.content === 0) {
+                return "status-empty";
+            }
+
             const classMap = {
-                0: 'status-down',
-                1: 'status-up',
-                2: 'status-pending', 
-                3: 'status-maintenance'
+                0: "status-down",
+                1: "status-up",
+                2: "status-pending",
+                3: "status-maintenance"
             };
-            return classMap[this.content.status] || 'status-unknown';
+            return classMap[this.content.status] || "status-unknown";
         },
 
         timeText() {
-            if (!this.content || this.content === 0) return '';
+            if (!this.content || this.content === 0) {
+                return "";
+            }
             return this.$root.datetime(this.content.time);
         },
 
         message() {
-            if (!this.content || this.content === 0) return '';
-            return this.content.msg || '';
+            if (!this.content || this.content === 0) {
+                return "";
+            }
+            return this.content.msg || "";
         }
     }
 };
@@ -106,7 +114,7 @@ export default {
     z-index: 9999;
     pointer-events: none;
     transform: translateX(-50%);
-    
+
     .tooltip-content {
         background: rgba(17, 24, 39, 0.95);
         backdrop-filter: blur(8px);
@@ -116,41 +124,41 @@ export default {
         box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
         min-width: 120px;
         text-align: center;
-        
+
         .tooltip-status {
             font-size: 12px;
             font-weight: 600;
             margin-bottom: 4px;
             text-transform: uppercase;
             letter-spacing: 0.5px;
-            
+
             &.status-up {
                 color: $primary;
             }
-            
+
             &.status-down {
                 color: $danger;
             }
-            
+
             &.status-pending {
                 color: $warning;
             }
-            
+
             &.status-maintenance {
                 color: $maintenance;
             }
-            
+
             &.status-empty {
                 color: $secondary-text;
             }
         }
-        
+
         .tooltip-time {
             color: #d1d5db;
             font-size: 11px;
             margin-bottom: 2px;
         }
-        
+
         .tooltip-message {
             color: #f3f4f6;
             font-size: 10px;
@@ -159,7 +167,7 @@ export default {
             border-top: 1px solid rgba(75, 85, 99, 0.3);
         }
     }
-    
+
     .tooltip-arrow {
         position: absolute;
         left: 50%;
@@ -168,11 +176,11 @@ export default {
         height: 0;
         border-left: 6px solid transparent;
         border-right: 6px solid transparent;
-        
+
         // Default: tooltip below element, arrow points up
         border-bottom: 6px solid rgba(17, 24, 39, 0.95);
         top: -6px;
-        
+
         &.arrow-above {
             // Tooltip above element, arrow points down
             top: auto;
@@ -181,10 +189,10 @@ export default {
             border-top: 6px solid rgba(17, 24, 39, 0.95);
         }
     }
-    
+
     // Smooth entrance animation
     animation: tooltip-fade-in 0.2s $easing-out;
-    
+
     &.tooltip-above {
         transform: translateX(-50%) translateY(-8px);
     }
@@ -196,10 +204,10 @@ export default {
         background: rgba(31, 41, 55, 0.95);
         border-color: rgba(107, 114, 128, 0.3);
     }
-    
+
     .tooltip-arrow {
         border-bottom-color: rgba(31, 41, 55, 0.95);
-        
+
         &.arrow-above {
             border-top-color: rgba(31, 41, 55, 0.95);
         }
@@ -223,4 +231,4 @@ export default {
         animation: none !important;
     }
 }
-</style>
\ No newline at end of file
+</style>