fix: streamline tooltip management and enhance event handling (#254)

This pull request refactors the tooltip management system in
`tooltip_manager.ts` to simplify the logic and improve maintainability.
The most significant changes include removing redundant checks for
tooltip enablement in multiple functions, updating the `showTooltip`
function to accept an `HTMLElement` parameter, and streamlining the
tooltip state update process.

### Refactoring of Tooltip Management:

* **Simplified `attachTooltip` logic**: Removed the redundant
`tooltipsEnabled` check and moved the addition of the `"has-tooltip"`
class to the `showTooltip` function. This reduces duplication and
ensures consistent behavior.
* **Enhanced mutation observer in `attachTooltip`**: Cleaned up the code
for detecting element removal by removing unnecessary conditions and
ensuring the observer disconnects after hiding the tooltip.

### Updates to Tooltip Behavior:

* **Modified `showTooltip` function**: Added an `HTMLElement` parameter
to allow the function to directly manage the tooltip's associated
element, including adding the `"has-tooltip"` class. This centralizes
tooltip activation logic.
* **Streamlined `updateTooltipsState`**: Simplified the logic by only
removing the `"has-tooltip"` class when tooltips are disabled, reducing
unnecessary conditional branches.

Author: pgallino

src/graphics/renderables/tooltip_manager.ts

@@ -24,58 +24,45 @@ export function attachTooltip(
   key: string,
   hideDelay = false,
 ): void {
-  const tooltipsEnabled =
-    globalContext
-      ?.getConfigMenu()
-      .getConfigSwitchValue(CONFIG_SWITCH_KEYS.ENABLE_TOOLTIPS) ?? true;
-
   if (key in TOOLTIP_CONTENT) {
-    if (tooltipsEnabled) {
-      element.classList.add("has-tooltip");
-
-      const showHandler = () => showTooltip(key);
-      const hideHandler = () => {
-        if (hideDelay) {
-          startHideTooltipDelay();
-        } else {
-          hideTooltip();
+    const showHandler = () => showTooltip(key, element);
+    const hideHandler = () => {
+      if (hideDelay) {
+        startHideTooltipDelay();
+      } else {
+        hideTooltip();
+      }
+    };
+
+    element.addEventListener("mouseenter", showHandler);
+    element.addEventListener("mouseleave", hideHandler);
+
+    // Add a mutation observer to detect when the element is removed
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === "childList" && !document.body.contains(element)) {
+          hideTooltip(); // Hide the tooltip if the element is removed
+          observer.disconnect(); // Stop observing
         }
-      };
-
-      element.addEventListener("mouseenter", showHandler);
-      element.addEventListener("mouseleave", hideHandler);
-
-      // Add a mutation observer to detect when the element is removed
-      const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (
-            mutation.type === "childList" &&
-            !document.body.contains(element)
-          ) {
-            hideTooltip(); // Hide the tooltip if the element is removed
-            observer.disconnect(); // Stop observing
-          }
-        });
       });
+    });
 
-      observer.observe(document.body, { childList: true, subtree: true });
-    } else {
-      element.classList.remove("has-tooltip");
-    }
+    observer.observe(document.body, { childList: true, subtree: true });
   }
 }
 
 /**
  * Shows a tooltip with the specified key.
  * @param key - The key for the tooltip content.
  */
-export function showTooltip(key: string): void {
+export function showTooltip(key: string, element: HTMLElement): void {
   const tooltipsEnabled =
     globalContext
       ?.getConfigMenu()
       .getConfigSwitchValue(CONFIG_SWITCH_KEYS.ENABLE_TOOLTIPS) ?? true;
   if (!tooltipsEnabled) return;
 
+  element.classList.add("has-tooltip");
   const text = TOOLTIP_CONTENT[key as keyof typeof TOOLTIP_CONTENT];
   const tooltip = document.getElementById("global-tooltip");
   if (tooltip) {
@@ -125,9 +112,7 @@ export function updateTooltipsState(): void {
   tooltipElements.forEach((element) => {
     const htmlElement = element as HTMLElement;
 
-    if (tooltipsEnabled) {
-      htmlElement.classList.add("has-tooltip");
-    } else {
+    if (!tooltipsEnabled) {
       htmlElement.classList.remove("has-tooltip");
     }
   });