diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx
index d709b43d2cb0..7175609e05c4 100644
--- a/src/components/Navigation/Navigation.jsx
+++ b/src/components/Navigation/Navigation.jsx
@@ -1,5 +1,5 @@
 // Import External Dependencies
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { DocSearch } from '@docsearch/react';
 import { Link as ReactDOMLink, NavLink, useLocation } from 'react-router-dom';
@@ -70,12 +70,21 @@ NavigationIcon.propTypes = {
   title: PropTypes.string.isRequired,
 };
 function NavigationIcon({ children, to, title }) {
+  const tooltipRef = useRef();
+
+  const hideTooltip = () => {
+    if (tooltipRef.current) {
+      tooltipRef.current.blur();
+    }
+  };
+
   return (
-    <Tooltip content={`webpack on ${title}`}>
+    <Tooltip content={`webpack on ${title}`} ref={tooltipRef}>
       <Link
         to={to}
         className="inline-flex items-center text-gray-100 dark:text-gray-200 hover:text-blue-200"
         aria-label={`webpack on ${title}`}
+        onClick={hideTooltip}
       >
         {children}
       </Link>
diff --git a/src/components/Tooltip/Tooltip.jsx b/src/components/Tooltip/Tooltip.jsx
index 000e4fe6daf0..dc7e47ede438 100644
--- a/src/components/Tooltip/Tooltip.jsx
+++ b/src/components/Tooltip/Tooltip.jsx
@@ -1,89 +1,99 @@
-import { useState } from 'react';
+import { useState, forwardRef } from 'react';
 import PropTypes from 'prop-types';
-const Tooltip = ({
-  children,
-  content,
-  position = 'bottom',
-  delay = 300,
-  className = '',
-}) => {
-  const [isVisible, setIsVisible] = useState(false);
-  const [isDelayed, setIsDelayed] = useState(false);
-  const showTooltip = () => {
-    const timer = setTimeout(() => {
-      setIsDelayed(true);
-    }, delay);
-    setIsVisible(true);
-    return () => clearTimeout(timer);
-  };
-  const hideTooltip = () => {
-    setIsVisible(false);
-    setIsDelayed(false);
-  };
-  // Position classes - increase the margins to create more space
-  const positions = {
-    top: 'bottom-full left-1/2 -translate-x-1/2 mb-8',
-    bottom: 'top-full left-1/2 -translate-x-1/2 mt-10',
-    left: 'right-full top-1/2 -translate-y-1/2 mr-8',
-    right: 'left-full top-1/2 -translate-y-1/2 ml-8',
-  };
-  // Custom background color for both tooltip and triangle
-  const bgColor = '#526B78';
-  return (
-    <div
-      className={`relative flex items-center justify-center ${className}`}
-      onMouseEnter={showTooltip}
-      onMouseLeave={hideTooltip}
-      onFocus={showTooltip}
-      onBlur={hideTooltip}
-    >
-      {children}
-      {isVisible && (
-        <div
-          className={`
+
+const Tooltip = forwardRef(
+  (
+    {
+      children,
+      content,
+      position = 'bottom',
+      delay = 300,
+      className = '',
+      onHide,
+    },
+    ref
+  ) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const [isDelayed, setIsDelayed] = useState(false);
+    const showTooltip = () => {
+      const timer = setTimeout(() => {
+        setIsDelayed(true);
+      }, delay);
+      setIsVisible(true);
+      return () => clearTimeout(timer);
+    };
+    const hideTooltip = () => {
+      setIsVisible(false);
+      setIsDelayed(false);
+      if (onHide) onHide();
+    };
+    // Position classes - increase the margins to create more space
+    const positions = {
+      top: 'bottom-full left-1/2 -translate-x-1/2 mb-8',
+      bottom: 'top-full left-1/2 -translate-x-1/2 mt-10',
+      left: 'right-full top-1/2 -translate-y-1/2 mr-8',
+      right: 'left-full top-1/2 -translate-y-1/2 ml-8',
+    };
+    // Custom background color for both tooltip and triangle
+    const bgColor = '#526B78';
+    return (
+      <div
+        ref={ref}
+        className={`relative flex items-center justify-center ${className}`}
+        onMouseEnter={showTooltip}
+        onMouseLeave={hideTooltip}
+        onBlur={hideTooltip}
+      >
+        {children}
+        {isVisible && (
+          <div
+            className={`
             absolute z-[9999]
             ${positions[position]}
             ${isDelayed ? 'opacity-100' : 'opacity-0'}
             transition-opacity duration-200
             pointer-events-none
           `}
-        >
-          <div
-            className="text-white text-xs font-medium p-10 rounded-md whitespace-nowrap shadow-xl"
-            style={{ backgroundColor: bgColor }}
           >
-            {content}
-            {/* Triangle/Arrow - Reduced size */}
-            {position === 'top' && (
-              <div
-                className="absolute top-full left-1/2 -translate-x-1/2 border-solid border-l-[6px] border-r-[6px] border-t-[6px] border-l-transparent border-r-transparent"
-                style={{ borderTopColor: bgColor }}
-              ></div>
-            )}
-            {position === 'bottom' && (
-              <div
-                className="absolute -top-[6px] left-1/2 -translate-x-1/2 border-solid border-l-[6px] border-r-[6px] border-b-[6px] border-l-transparent border-r-transparent"
-                style={{ borderBottomColor: bgColor }}
-              ></div>
-            )}
-            {position === 'left' && (
-              <div
-                className="absolute top-1/2 -translate-y-1/2 right-[-6px] border-solid border-t-[6px] border-b-[6px] border-l-[6px] border-t-transparent border-b-transparent"
-                style={{ borderLeftColor: bgColor }}
-              ></div>
-            )}
-            {position === 'right' && (
-              <div
-                className="absolute top-1/2 -translate-y-1/2 left-[-6px] border-solid border-t-[6px] border-b-[6px] border-r-[6px] border-t-transparent border-b-transparent"
-                style={{ borderRightColor: bgColor }}
-              ></div>
-            )}
+            <div
+              className="text-white text-xs font-medium p-10 rounded-md whitespace-nowrap shadow-xl"
+              style={{ backgroundColor: bgColor }}
+            >
+              {content}
+              {/* Triangle/Arrow - Reduced size */}
+              {position === 'top' && (
+                <div
+                  className="absolute top-full left-1/2 -translate-x-1/2 border-solid border-l-[6px] border-r-[6px] border-t-[6px] border-l-transparent border-r-transparent"
+                  style={{ borderTopColor: bgColor }}
+                ></div>
+              )}
+              {position === 'bottom' && (
+                <div
+                  className="absolute -top-[6px] left-1/2 -translate-x-1/2 border-solid border-l-[6px] border-r-[6px] border-b-[6px] border-l-transparent border-r-transparent"
+                  style={{ borderBottomColor: bgColor }}
+                ></div>
+              )}
+              {position === 'left' && (
+                <div
+                  className="absolute top-1/2 -translate-y-1/2 right-[-6px] border-solid border-t-[6px] border-b-[6px] border-l-[6px] border-t-transparent border-b-transparent"
+                  style={{ borderLeftColor: bgColor }}
+                ></div>
+              )}
+              {position === 'right' && (
+                <div
+                  className="absolute top-1/2 -translate-y-1/2 left-[-6px] border-solid border-t-[6px] border-b-[6px] border-r-[6px] border-t-transparent border-b-transparent"
+                  style={{ borderRightColor: bgColor }}
+                ></div>
+              )}
+            </div>
           </div>
-        </div>
-      )}
-    </div>
-  );
-};
+        )}
+      </div>
+    );
+  }
+);
+
+Tooltip.displayName = 'Tooltip';
 
 Tooltip.propTypes = {
   children: PropTypes.node.isRequired,
@@ -91,6 +101,7 @@ Tooltip.propTypes = {
   position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
   delay: PropTypes.number,
   className: PropTypes.string,
+  onHide: PropTypes.func,
 };
 
 export default Tooltip;