fix: Fixes commands.html tooltip (#1670)

Distribution/Data/commands.html

@@ -353,7 +353,7 @@ <h1 class="text-center text-white text-3xl opacity-70 p-2 pb-12 font-light">Mode
   </div>
 </div>
 <!-- Toolip -->
-<div id="tooltip" class="absolute p-2 bg-modern-black text-white rounded-md shadow-lg max-w-lg hidden"></div>
+<div id="tooltip" class="absolute p-2 bg-modern-black text-white rounded-md shadow-lg max-w-xs md:max-w-sm lg:max-w-md xl:max-w-lg hidden"></div>
 <span id="commands" style="display:none; visibility: hidden">
   <!-- COMMANDS -->
 </span>
@@ -429,7 +429,7 @@ <h1 class="text-center text-white text-3xl opacity-70 p-2 pb-12 font-light">Mode
     tabData.forEach(item => {
       table += `
         <tr class="border-b">
-            <td class="px-4 py-4 text-sm font-medium text-gold-500 w-1/4 "><p>${item.name}</p></td>
+            <td class="px-4 py-4 text-sm font-medium text-gold-500 w-1/4"><p>${item.name}</p></td>
             <td class="text-sm text-gold-900 px-6 py-4">
         `;
 
@@ -508,11 +508,47 @@ <h1 class="text-center text-white text-3xl opacity-70 p-2 pb-12 font-light">Mode
 
   // Function to show the tooltip
   function showTooltip(event, content) {
-    const tooltip = document.getElementById("tooltip");
+    const tooltip = document.getElementById('tooltip');
     tooltip.innerHTML = content;
-    tooltip.style.left = `${event.pageX + 15}px`;
-    tooltip.style.top = `${event.pageY + 15}px`;
-    tooltip.classList.remove("hidden");
+
+    // Make it visible to the DOM so we can get size calculations
+    tooltip.style.visibility = 'hidden';
+    tooltip.classList.remove('hidden');
+
+    const srcRect = event.target.getBoundingClientRect();
+
+    // Calculate the size of the tooltip for positioning
+    const tooltipRect = tooltip.getBoundingClientRect();
+    const offset = 20; // Offset from the cursor for the tooltip
+
+    const startX = window.scrollX + srcRect.x;
+    const startY = window.scrollY + srcRect.y;
+
+    // Initial horizontal position (with viewport width check for side overflow)
+    let leftPosition = startX + offset;
+    if (leftPosition + tooltipRect.width > document.documentElement.clientWidth) {
+      leftPosition = document.documentElement.clientWidth - tooltipRect.width - offset;
+    }
+
+    // Determine vertical position based on available space
+    let topPosition;
+    const spaceAbove = startY - window.scrollY;
+    const spaceBelow = window.innerHeight - spaceAbove;
+
+    // Check if there's enough space below the cursor; otherwise, flip above
+    if (spaceBelow > tooltipRect.height + offset) {
+      topPosition = startY + offset;
+    } else if (spaceAbove > tooltipRect.height + offset) {
+      topPosition = startY - tooltipRect.height - offset;
+    } else {
+      // If neither above nor below has enough space, default to below and adjust to within viewport
+      topPosition = Math.max(window.scrollY + offset, startY - (tooltipRect.height / 2));
+    }
+
+    // Apply the calculated positions
+    tooltip.style.left = `${leftPosition}px`;
+    tooltip.style.top = `${topPosition}px`;
+    tooltip.style.visibility = 'visible';
   }
 
   // Function to hide the tooltip
@@ -521,10 +557,6 @@ <h1 class="text-center text-white text-3xl opacity-70 p-2 pb-12 font-light">Mode
     tooltip.classList.add("hidden");
   }
 
-  const escapeHtml = (unsafe) => {
-    return unsafe.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&#039;");
-  }
-
   initTabs();
 </script>
 </body>