Update interface.js

interface.js

@@ -26,15 +26,12 @@ const currentScriptTag = document.currentScript;
       const response = await fetch(configUrl);
       config = await response.json();
     } catch (error) {
-      // Silent fail
       return;
     }
   } else {
-    // Silent fail
     return;
   }
 
-  // 2. If config.css_url is provided, inject a <link> to that CSS
   if (config.css_url) {
     const linkEl = document.createElement('link');
     linkEl.rel = "stylesheet";
@@ -42,10 +39,8 @@ const currentScriptTag = document.currentScript;
     document.head.appendChild(linkEl);
   }
 
-  // 3. Generate a unique instanceId for this widget
   const instanceId = Math.random().toString(36).substr(2, 8);
 
-  // 4. Compute the aspect ratio (padding-bottom %)
   let aspectPercent = "100%";
   if (config.aspect) {
     if (config.aspect.includes(":")) {
@@ -70,7 +65,6 @@ const currentScriptTag = document.currentScript;
     }
   }
 
-  // 5. Create the widget container
   const widgetContainer = document.createElement('div');
   widgetContainer.id = 'ply-widget-container-' + instanceId;
   widgetContainer.classList.add('ply-widget-container');
@@ -78,7 +72,6 @@ const currentScriptTag = document.currentScript;
   widgetContainer.style.paddingBottom = aspectPercent;
   widgetContainer.setAttribute('data-original-aspect', aspectPercent);
 
-  // Conditionally include the “tooltips-toggle” button only if config.tooltips_url is defined
   const tooltipsButtonHTML = config.tooltips_url
     ? `<button id="tooltips-toggle-${instanceId}" class="widget-button tooltips-toggle">⦿</button>`
     : '';
@@ -110,7 +103,6 @@ const currentScriptTag = document.currentScript;
 
   scriptTag.parentNode.appendChild(widgetContainer);
 
-  // 6. Grab references to new DOM elements
   const viewerContainerElem = document.getElementById('viewer-container-' + instanceId);
   const fullscreenToggle    = document.getElementById('fullscreen-toggle-' + instanceId);
   const helpToggle          = document.getElementById('help-toggle-' + instanceId);
@@ -177,7 +169,6 @@ const currentScriptTag = document.currentScript;
   const canvasId = 'canvas-' + instanceId;
   const canvasEl = document.getElementById(canvasId);
 
-  // 8. Conditional display of tooltips-toggle button
   if (tooltipsToggleBtn) {
     if (!config.tooltips_url) {
       tooltipsToggleBtn.style.display = 'none';
@@ -188,7 +179,6 @@ const currentScriptTag = document.currentScript;
     }
   }
 
-  // 9. Fullscreen / state-preservation logic
   let isFullscreen = false;
   let savedState = null;
 
@@ -347,11 +337,21 @@ const currentScriptTag = document.currentScript;
   tooltipCloseBtn.addEventListener('click', hideTooltipPanel);
 
   document.addEventListener('tooltip-selected', (evt) => {
+    // Always show panel, cancel hide first
+    if (dragHide) {
+      viewerContainerElem.removeEventListener('pointermove', dragHide);
+      dragHide = null;
+    }
     const { title, description, imgUrl } = evt.detail;
     tooltipTextDiv.innerHTML = `<strong>${title}</strong><br>${description}`;
+    // Force a repaint: clear src before setting, for repeated images
+    tooltipImage.style.display = 'none';
+    tooltipImage.src = '';
     if (imgUrl) {
+      tooltipImage.onload = () => {
+        tooltipImage.style.display = 'block';
+      };
       tooltipImage.src = imgUrl;
-      tooltipImage.style.display = 'block';
     } else {
       tooltipImage.style.display = 'none';
     }