myio-js-library 0.1.206 → 0.1.208

package/dist/index.cjs

@@ -1572,7 +1572,7 @@ function isDeviceOffline(deviceStatus) {
 }
 function getDeviceStatusIcon(deviceStatus, deviceType = null) {
   const normalizedType = deviceType?.toUpperCase() || "";
-  const isWaterDevice = normalizedType === "TANK" || normalizedType === "CAIXA_DAGUA" || normalizedType === "HIDROMETRO";
+  const isWaterDevice = normalizedType === "TANK" || normalizedType === "CAIXA_DAGUA" || normalizedType === "HIDROMETRO" || normalizedType === "HIDROMETRO_AREA_COMUM" || normalizedType === "HIDROMETRO_SHOPPING" || normalizedType.startsWith("HIDROMETRO_");
   const isTemperatureDevice = normalizedType === "TERMOSTATO";
   let iconMap;
   if (isWaterDevice) {
@@ -11947,6 +11947,14 @@ var DEVICE_TYPE_CONFIG = {
     category: "water",
     image: "https://dashboard.myio-bas.com/api/images/public/aMQYFJbGHs9gQbQkMn6XseAlUZHanBR4"
   },
+  HIDROMETRO_AREA_COMUM: {
+    category: "water",
+    image: "https://dashboard.myio-bas.com/api/images/public/IbEhjsvixAxwKg1ntGGZc5xZwwvGKv2t"
+  },
+  HIDROMETRO_SHOPPING: {
+    category: "water",
+    image: "https://dashboard.myio-bas.com/api/images/public/OIMmvN4ZTKYDvrpPGYY5agqMRoSaWNTI"
+  },
   CAIXA_DAGUA: {
     category: "water",
     image: "https://dashboard.myio-bas.com/api/images/public/3t6WVhMQJFsrKA8bSZmrngDsNPkZV7fq"
@@ -12473,7 +12481,9 @@ function renderCardComponentV5({
                   <span class="consumption-value">${formatCardValue(cardEntity.lastValue, deviceType)}</span>
                 </div>
               </div>
-              ${!isTermostatoDevice ? `<span class="device-percentage-badge percentage-tooltip-trigger" style="position: absolute; bottom: 12px; right: 12px; z-index: 20; background: none !important; cursor: help;">${percentageForDisplay.toFixed(1)}%</span>` : tempDeviationPercent ? `<span class="device-percentage-badge temp-deviation-badge temp-comparison-tooltip-trigger" style="position: absolute; bottom: 12px; right: 12px; z-index: 20; background: none !important; color: ${tempDeviationPercent.isAbove ? "#ef4444" : tempDeviationPercent.isBelow ? "#3b82f6" : "#6b7280"}; font-weight: 600; cursor: help;">${tempDeviationPercent.sign}${tempDeviationPercent.value.toFixed(1)}%</span>` : ""}
+              ${!isTermostatoDevice ? `<span class="device-percentage-badge percentage-tooltip-trigger" style="position: absolute; bottom: 12px; right: 12px; z-index: 20; background: none !important; cursor: help;">${percentageForDisplay.toFixed(
+    1
+  )}%</span>` : tempDeviationPercent ? `<span class="device-percentage-badge temp-deviation-badge temp-comparison-tooltip-trigger" style="position: absolute; bottom: 12px; right: 12px; z-index: 20; background: none !important; color: ${tempDeviationPercent.isAbove ? "#ef4444" : tempDeviationPercent.isBelow ? "#3b82f6" : "#6b7280"}; font-weight: 600; cursor: help;">${tempDeviationPercent.sign}${tempDeviationPercent.value.toFixed(1)}%</span>` : ""}
             </div>
           </div>
         </div>
@@ -36300,14 +36310,18 @@ function injectCSS7() {
   document.head.appendChild(style);
   cssInjected7 = true;
 }
+var HIDE_DELAY_MS = 2500;
+var SAFETY_TIMEOUT_MS = 15e3;
 var state3 = {
   hideTimer: null,
+  safetyTimer: null,
   isMouseOverTooltip: false,
   isMaximized: false,
   isDragging: false,
   dragOffset: { x: 0, y: 0 },
   savedPosition: null,
-  pinnedCounter: 0
+  pinnedCounter: 0,
+  isPinned: false
 };
 function generateHeaderHTML3(icon, title) {
   return `
@@ -36343,6 +36357,7 @@ function setupHoverListeners3(container) {
       clearTimeout(state3.hideTimer);
       state3.hideTimer = null;
     }
+    resetSafetyTimer();
   };
   container.onmouseleave = () => {
     state3.isMouseOverTooltip = false;
@@ -36524,15 +36539,42 @@ function toggleMaximize3(container) {
   }
 }
 function startDelayedHide3() {
-  if (state3.isMouseOverTooltip) return;
+  if (state3.isMouseOverTooltip || state3.isPinned) return;
   if (state3.hideTimer) {
     clearTimeout(state3.hideTimer);
   }
   state3.hideTimer = setTimeout(() => {
     hideWithAnimation3();
-  }, 1500);
+  }, HIDE_DELAY_MS);
+}
+function resetSafetyTimer() {
+  if (state3.safetyTimer) {
+    clearTimeout(state3.safetyTimer);
+    state3.safetyTimer = null;
+  }
+  const container = document.getElementById("myio-info-tooltip");
+  if (container && container.classList.contains("visible") && !state3.isPinned) {
+    state3.safetyTimer = setTimeout(() => {
+      console.log("[InfoTooltip] Safety timeout reached - forcing hide");
+      InfoTooltip.destroy();
+    }, SAFETY_TIMEOUT_MS);
+  }
+}
+function clearAllTimers() {
+  if (state3.hideTimer) {
+    clearTimeout(state3.hideTimer);
+    state3.hideTimer = null;
+  }
+  if (state3.safetyTimer) {
+    clearTimeout(state3.safetyTimer);
+    state3.safetyTimer = null;
+  }
 }
 function hideWithAnimation3() {
+  if (state3.safetyTimer) {
+    clearTimeout(state3.safetyTimer);
+    state3.safetyTimer = null;
+  }
   const container = document.getElementById("myio-info-tooltip");
   if (container && container.classList.contains("visible")) {
     container.classList.add("closing");
@@ -36577,12 +36619,10 @@ var InfoTooltip = {
    * Show tooltip
    */
   show(triggerElement, options) {
-    if (state3.hideTimer) {
-      clearTimeout(state3.hideTimer);
-      state3.hideTimer = null;
-    }
+    clearAllTimers();
     const container = this.getContainer();
     container.classList.remove("closing");
+    state3.isPinned = false;
     container.innerHTML = `
       <div class="myio-info-tooltip__panel">
         ${generateHeaderHTML3(options.icon, options.title)}
@@ -36596,6 +36636,7 @@ var InfoTooltip = {
     setupHoverListeners3(container);
     setupButtonListeners3(container);
     setupDragListeners3(container);
+    resetSafetyTimer();
   },
   /**
    * Start delayed hide
@@ -36607,10 +36648,7 @@ var InfoTooltip = {
    * Hide immediately
    */
   hide() {
-    if (state3.hideTimer) {
-      clearTimeout(state3.hideTimer);
-      state3.hideTimer = null;
-    }
+    clearAllTimers();
     state3.isMouseOverTooltip = false;
     const container = document.getElementById(this.containerId);
     if (container) {
@@ -36621,19 +36659,36 @@ var InfoTooltip = {
    * Close and reset all states
    */
   close() {
+    clearAllTimers();
     state3.isMaximized = false;
     state3.isDragging = false;
     state3.savedPosition = null;
-    if (state3.hideTimer) {
-      clearTimeout(state3.hideTimer);
-      state3.hideTimer = null;
-    }
     state3.isMouseOverTooltip = false;
+    state3.isPinned = false;
     const container = document.getElementById(this.containerId);
     if (container) {
       container.classList.remove("visible", "pinned", "maximized", "dragging", "closing");
     }
   },
+  /**
+   * Destroy tooltip completely - guaranteed cleanup
+   * Removes from DOM and clears all timers/state
+   */
+  destroy() {
+    clearAllTimers();
+    state3.isMaximized = false;
+    state3.isDragging = false;
+    state3.savedPosition = null;
+    state3.isMouseOverTooltip = false;
+    state3.isPinned = false;
+    const container = document.getElementById(this.containerId);
+    if (container) {
+      container.remove();
+    }
+    const pinnedClones = document.querySelectorAll('[id^="myio-info-tooltip-pinned-"]');
+    pinnedClones.forEach((clone) => clone.remove());
+    console.log("[InfoTooltip] Destroyed - all tooltips removed");
+  },
   /**
    * Attach tooltip to trigger element with hover behavior
    */

package/dist/index.d.cts

@@ -3522,6 +3522,11 @@ declare const InfoTooltip: {
      * Close and reset all states
      */
     close(): void;
+    /**
+     * Destroy tooltip completely - guaranteed cleanup
+     * Removes from DOM and clears all timers/state
+     */
+    destroy(): void;
     /**
      * Attach tooltip to trigger element with hover behavior
      */

package/dist/index.js

@@ -1400,7 +1400,7 @@ function isDeviceOffline(deviceStatus) {
 }
 function getDeviceStatusIcon(deviceStatus, deviceType = null) {
   const normalizedType = deviceType?.toUpperCase() || "";
-  const isWaterDevice = normalizedType === "TANK" || normalizedType === "CAIXA_DAGUA" || normalizedType === "HIDROMETRO";
+  const isWaterDevice = normalizedType === "TANK" || normalizedType === "CAIXA_DAGUA" || normalizedType === "HIDROMETRO" || normalizedType === "HIDROMETRO_AREA_COMUM" || normalizedType === "HIDROMETRO_SHOPPING" || normalizedType.startsWith("HIDROMETRO_");
   const isTemperatureDevice = normalizedType === "TERMOSTATO";
   let iconMap;
   if (isWaterDevice) {
@@ -11775,6 +11775,14 @@ var DEVICE_TYPE_CONFIG = {
     category: "water",
     image: "https://dashboard.myio-bas.com/api/images/public/aMQYFJbGHs9gQbQkMn6XseAlUZHanBR4"
   },
+  HIDROMETRO_AREA_COMUM: {
+    category: "water",
+    image: "https://dashboard.myio-bas.com/api/images/public/IbEhjsvixAxwKg1ntGGZc5xZwwvGKv2t"
+  },
+  HIDROMETRO_SHOPPING: {
+    category: "water",
+    image: "https://dashboard.myio-bas.com/api/images/public/OIMmvN4ZTKYDvrpPGYY5agqMRoSaWNTI"
+  },
   CAIXA_DAGUA: {
     category: "water",
     image: "https://dashboard.myio-bas.com/api/images/public/3t6WVhMQJFsrKA8bSZmrngDsNPkZV7fq"
@@ -12301,7 +12309,9 @@ function renderCardComponentV5({
                   <span class="consumption-value">${formatCardValue(cardEntity.lastValue, deviceType)}</span>
                 </div>
               </div>
-              ${!isTermostatoDevice ? `<span class="device-percentage-badge percentage-tooltip-trigger" style="position: absolute; bottom: 12px; right: 12px; z-index: 20; background: none !important; cursor: help;">${percentageForDisplay.toFixed(1)}%</span>` : tempDeviationPercent ? `<span class="device-percentage-badge temp-deviation-badge temp-comparison-tooltip-trigger" style="position: absolute; bottom: 12px; right: 12px; z-index: 20; background: none !important; color: ${tempDeviationPercent.isAbove ? "#ef4444" : tempDeviationPercent.isBelow ? "#3b82f6" : "#6b7280"}; font-weight: 600; cursor: help;">${tempDeviationPercent.sign}${tempDeviationPercent.value.toFixed(1)}%</span>` : ""}
+              ${!isTermostatoDevice ? `<span class="device-percentage-badge percentage-tooltip-trigger" style="position: absolute; bottom: 12px; right: 12px; z-index: 20; background: none !important; cursor: help;">${percentageForDisplay.toFixed(
+    1
+  )}%</span>` : tempDeviationPercent ? `<span class="device-percentage-badge temp-deviation-badge temp-comparison-tooltip-trigger" style="position: absolute; bottom: 12px; right: 12px; z-index: 20; background: none !important; color: ${tempDeviationPercent.isAbove ? "#ef4444" : tempDeviationPercent.isBelow ? "#3b82f6" : "#6b7280"}; font-weight: 600; cursor: help;">${tempDeviationPercent.sign}${tempDeviationPercent.value.toFixed(1)}%</span>` : ""}
             </div>
           </div>
         </div>
@@ -36128,14 +36138,18 @@ function injectCSS7() {
   document.head.appendChild(style);
   cssInjected7 = true;
 }
+var HIDE_DELAY_MS = 2500;
+var SAFETY_TIMEOUT_MS = 15e3;
 var state3 = {
   hideTimer: null,
+  safetyTimer: null,
   isMouseOverTooltip: false,
   isMaximized: false,
   isDragging: false,
   dragOffset: { x: 0, y: 0 },
   savedPosition: null,
-  pinnedCounter: 0
+  pinnedCounter: 0,
+  isPinned: false
 };
 function generateHeaderHTML3(icon, title) {
   return `
@@ -36171,6 +36185,7 @@ function setupHoverListeners3(container) {
       clearTimeout(state3.hideTimer);
       state3.hideTimer = null;
     }
+    resetSafetyTimer();
   };
   container.onmouseleave = () => {
     state3.isMouseOverTooltip = false;
@@ -36352,15 +36367,42 @@ function toggleMaximize3(container) {
   }
 }
 function startDelayedHide3() {
-  if (state3.isMouseOverTooltip) return;
+  if (state3.isMouseOverTooltip || state3.isPinned) return;
   if (state3.hideTimer) {
     clearTimeout(state3.hideTimer);
   }
   state3.hideTimer = setTimeout(() => {
     hideWithAnimation3();
-  }, 1500);
+  }, HIDE_DELAY_MS);
+}
+function resetSafetyTimer() {
+  if (state3.safetyTimer) {
+    clearTimeout(state3.safetyTimer);
+    state3.safetyTimer = null;
+  }
+  const container = document.getElementById("myio-info-tooltip");
+  if (container && container.classList.contains("visible") && !state3.isPinned) {
+    state3.safetyTimer = setTimeout(() => {
+      console.log("[InfoTooltip] Safety timeout reached - forcing hide");
+      InfoTooltip.destroy();
+    }, SAFETY_TIMEOUT_MS);
+  }
+}
+function clearAllTimers() {
+  if (state3.hideTimer) {
+    clearTimeout(state3.hideTimer);
+    state3.hideTimer = null;
+  }
+  if (state3.safetyTimer) {
+    clearTimeout(state3.safetyTimer);
+    state3.safetyTimer = null;
+  }
 }
 function hideWithAnimation3() {
+  if (state3.safetyTimer) {
+    clearTimeout(state3.safetyTimer);
+    state3.safetyTimer = null;
+  }
   const container = document.getElementById("myio-info-tooltip");
   if (container && container.classList.contains("visible")) {
     container.classList.add("closing");
@@ -36405,12 +36447,10 @@ var InfoTooltip = {
    * Show tooltip
    */
   show(triggerElement, options) {
-    if (state3.hideTimer) {
-      clearTimeout(state3.hideTimer);
-      state3.hideTimer = null;
-    }
+    clearAllTimers();
     const container = this.getContainer();
     container.classList.remove("closing");
+    state3.isPinned = false;
     container.innerHTML = `
       <div class="myio-info-tooltip__panel">
         ${generateHeaderHTML3(options.icon, options.title)}
@@ -36424,6 +36464,7 @@ var InfoTooltip = {
     setupHoverListeners3(container);
     setupButtonListeners3(container);
     setupDragListeners3(container);
+    resetSafetyTimer();
   },
   /**
    * Start delayed hide
@@ -36435,10 +36476,7 @@ var InfoTooltip = {
    * Hide immediately
    */
   hide() {
-    if (state3.hideTimer) {
-      clearTimeout(state3.hideTimer);
-      state3.hideTimer = null;
-    }
+    clearAllTimers();
     state3.isMouseOverTooltip = false;
     const container = document.getElementById(this.containerId);
     if (container) {
@@ -36449,19 +36487,36 @@ var InfoTooltip = {
    * Close and reset all states
    */
   close() {
+    clearAllTimers();
     state3.isMaximized = false;
     state3.isDragging = false;
     state3.savedPosition = null;
-    if (state3.hideTimer) {
-      clearTimeout(state3.hideTimer);
-      state3.hideTimer = null;
-    }
     state3.isMouseOverTooltip = false;
+    state3.isPinned = false;
     const container = document.getElementById(this.containerId);
     if (container) {
       container.classList.remove("visible", "pinned", "maximized", "dragging", "closing");
     }
   },
+  /**
+   * Destroy tooltip completely - guaranteed cleanup
+   * Removes from DOM and clears all timers/state
+   */
+  destroy() {
+    clearAllTimers();
+    state3.isMaximized = false;
+    state3.isDragging = false;
+    state3.savedPosition = null;
+    state3.isMouseOverTooltip = false;
+    state3.isPinned = false;
+    const container = document.getElementById(this.containerId);
+    if (container) {
+      container.remove();
+    }
+    const pinnedClones = document.querySelectorAll('[id^="myio-info-tooltip-pinned-"]');
+    pinnedClones.forEach((clone) => clone.remove());
+    console.log("[InfoTooltip] Destroyed - all tooltips removed");
+  },
   /**
    * Attach tooltip to trigger element with hover behavior
    */

package/dist/myio-js-library.umd.js

@@ -1406,7 +1406,7 @@
   }
   function getDeviceStatusIcon(deviceStatus, deviceType = null) {
     const normalizedType = deviceType?.toUpperCase() || "";
-    const isWaterDevice = normalizedType === "TANK" || normalizedType === "CAIXA_DAGUA" || normalizedType === "HIDROMETRO";
+    const isWaterDevice = normalizedType === "TANK" || normalizedType === "CAIXA_DAGUA" || normalizedType === "HIDROMETRO" || normalizedType === "HIDROMETRO_AREA_COMUM" || normalizedType === "HIDROMETRO_SHOPPING" || normalizedType.startsWith("HIDROMETRO_");
     const isTemperatureDevice = normalizedType === "TERMOSTATO";
     let iconMap;
     if (isWaterDevice) {
@@ -11763,6 +11763,14 @@
       category: "water",
       image: "https://dashboard.myio-bas.com/api/images/public/aMQYFJbGHs9gQbQkMn6XseAlUZHanBR4"
     },
+    HIDROMETRO_AREA_COMUM: {
+      category: "water",
+      image: "https://dashboard.myio-bas.com/api/images/public/IbEhjsvixAxwKg1ntGGZc5xZwwvGKv2t"
+    },
+    HIDROMETRO_SHOPPING: {
+      category: "water",
+      image: "https://dashboard.myio-bas.com/api/images/public/OIMmvN4ZTKYDvrpPGYY5agqMRoSaWNTI"
+    },
     CAIXA_DAGUA: {
       category: "water",
       image: "https://dashboard.myio-bas.com/api/images/public/3t6WVhMQJFsrKA8bSZmrngDsNPkZV7fq"
@@ -12289,7 +12297,9 @@
                   <span class="consumption-value">${formatCardValue(cardEntity.lastValue, deviceType)}</span>
                 </div>
               </div>
-              ${!isTermostatoDevice ? `<span class="device-percentage-badge percentage-tooltip-trigger" style="position: absolute; bottom: 12px; right: 12px; z-index: 20; background: none !important; cursor: help;">${percentageForDisplay.toFixed(1)}%</span>` : tempDeviationPercent ? `<span class="device-percentage-badge temp-deviation-badge temp-comparison-tooltip-trigger" style="position: absolute; bottom: 12px; right: 12px; z-index: 20; background: none !important; color: ${tempDeviationPercent.isAbove ? "#ef4444" : tempDeviationPercent.isBelow ? "#3b82f6" : "#6b7280"}; font-weight: 600; cursor: help;">${tempDeviationPercent.sign}${tempDeviationPercent.value.toFixed(1)}%</span>` : ""}
+              ${!isTermostatoDevice ? `<span class="device-percentage-badge percentage-tooltip-trigger" style="position: absolute; bottom: 12px; right: 12px; z-index: 20; background: none !important; cursor: help;">${percentageForDisplay.toFixed(
+    1
+  )}%</span>` : tempDeviationPercent ? `<span class="device-percentage-badge temp-deviation-badge temp-comparison-tooltip-trigger" style="position: absolute; bottom: 12px; right: 12px; z-index: 20; background: none !important; color: ${tempDeviationPercent.isAbove ? "#ef4444" : tempDeviationPercent.isBelow ? "#3b82f6" : "#6b7280"}; font-weight: 600; cursor: help;">${tempDeviationPercent.sign}${tempDeviationPercent.value.toFixed(1)}%</span>` : ""}
             </div>
           </div>
         </div>
@@ -35942,14 +35952,18 @@
     document.head.appendChild(style);
     cssInjected7 = true;
   }
+  var HIDE_DELAY_MS = 2500;
+  var SAFETY_TIMEOUT_MS = 15e3;
   var state3 = {
     hideTimer: null,
+    safetyTimer: null,
     isMouseOverTooltip: false,
     isMaximized: false,
     isDragging: false,
     dragOffset: { x: 0, y: 0 },
     savedPosition: null,
-    pinnedCounter: 0
+    pinnedCounter: 0,
+    isPinned: false
   };
   function generateHeaderHTML3(icon, title) {
     return `
@@ -35985,6 +35999,7 @@
         clearTimeout(state3.hideTimer);
         state3.hideTimer = null;
       }
+      resetSafetyTimer();
     };
     container.onmouseleave = () => {
       state3.isMouseOverTooltip = false;
@@ -36166,15 +36181,42 @@
     }
   }
   function startDelayedHide3() {
-    if (state3.isMouseOverTooltip) return;
+    if (state3.isMouseOverTooltip || state3.isPinned) return;
     if (state3.hideTimer) {
       clearTimeout(state3.hideTimer);
     }
     state3.hideTimer = setTimeout(() => {
       hideWithAnimation3();
-    }, 1500);
+    }, HIDE_DELAY_MS);
+  }
+  function resetSafetyTimer() {
+    if (state3.safetyTimer) {
+      clearTimeout(state3.safetyTimer);
+      state3.safetyTimer = null;
+    }
+    const container = document.getElementById("myio-info-tooltip");
+    if (container && container.classList.contains("visible") && !state3.isPinned) {
+      state3.safetyTimer = setTimeout(() => {
+        console.log("[InfoTooltip] Safety timeout reached - forcing hide");
+        InfoTooltip.destroy();
+      }, SAFETY_TIMEOUT_MS);
+    }
+  }
+  function clearAllTimers() {
+    if (state3.hideTimer) {
+      clearTimeout(state3.hideTimer);
+      state3.hideTimer = null;
+    }
+    if (state3.safetyTimer) {
+      clearTimeout(state3.safetyTimer);
+      state3.safetyTimer = null;
+    }
   }
   function hideWithAnimation3() {
+    if (state3.safetyTimer) {
+      clearTimeout(state3.safetyTimer);
+      state3.safetyTimer = null;
+    }
     const container = document.getElementById("myio-info-tooltip");
     if (container && container.classList.contains("visible")) {
       container.classList.add("closing");
@@ -36219,12 +36261,10 @@
      * Show tooltip
      */
     show(triggerElement, options) {
-      if (state3.hideTimer) {
-        clearTimeout(state3.hideTimer);
-        state3.hideTimer = null;
-      }
+      clearAllTimers();
       const container = this.getContainer();
       container.classList.remove("closing");
+      state3.isPinned = false;
       container.innerHTML = `
       <div class="myio-info-tooltip__panel">
         ${generateHeaderHTML3(options.icon, options.title)}
@@ -36238,6 +36278,7 @@
       setupHoverListeners3(container);
       setupButtonListeners3(container);
       setupDragListeners3(container);
+      resetSafetyTimer();
     },
     /**
      * Start delayed hide
@@ -36249,10 +36290,7 @@
      * Hide immediately
      */
     hide() {
-      if (state3.hideTimer) {
-        clearTimeout(state3.hideTimer);
-        state3.hideTimer = null;
-      }
+      clearAllTimers();
       state3.isMouseOverTooltip = false;
       const container = document.getElementById(this.containerId);
       if (container) {
@@ -36263,19 +36301,36 @@
      * Close and reset all states
      */
     close() {
+      clearAllTimers();
       state3.isMaximized = false;
       state3.isDragging = false;
       state3.savedPosition = null;
-      if (state3.hideTimer) {
-        clearTimeout(state3.hideTimer);
-        state3.hideTimer = null;
-      }
       state3.isMouseOverTooltip = false;
+      state3.isPinned = false;
       const container = document.getElementById(this.containerId);
       if (container) {
         container.classList.remove("visible", "pinned", "maximized", "dragging", "closing");
       }
     },
+    /**
+     * Destroy tooltip completely - guaranteed cleanup
+     * Removes from DOM and clears all timers/state
+     */
+    destroy() {
+      clearAllTimers();
+      state3.isMaximized = false;
+      state3.isDragging = false;
+      state3.savedPosition = null;
+      state3.isMouseOverTooltip = false;
+      state3.isPinned = false;
+      const container = document.getElementById(this.containerId);
+      if (container) {
+        container.remove();
+      }
+      const pinnedClones = document.querySelectorAll('[id^="myio-info-tooltip-pinned-"]');
+      pinnedClones.forEach((clone) => clone.remove());
+      console.log("[InfoTooltip] Destroyed - all tooltips removed");
+    },
     /**
      * Attach tooltip to trigger element with hover behavior
      */