diff --git a/components/tooltip.tsx b/components/tooltip.tsx
index c31252eb3..453ef0a4d 100644
--- a/components/tooltip.tsx
+++ b/components/tooltip.tsx
@@ -3,12 +3,12 @@ import React, { useEffect, useRef, useState } from "react";
 const TooltipComponent = ({ children }: { children: React.ReactNode }) => {
   const [tooltip, setTooltip] = useState(false);
   const [boundary, setBoundary] = useState(false);
+  const tooltipRef = useRef<HTMLDivElement | null>(null);
 
-  const showTooltip = () => {
-    setTooltip(true);
+  const toggleTooltip = () => {
+    setTooltip((prev) => !prev);
   };
 
-  const tooltipRef = useRef(null);
   useEffect(() => {
     const handleScroll = () => {
       if (tooltipRef.current) {
@@ -18,19 +18,27 @@ const TooltipComponent = ({ children }: { children: React.ReactNode }) => {
         setBoundary(distanceToBottom <= touchThreshold);
       }
     };
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        tooltipRef.current &&
+        !tooltipRef.current.contains(event.target as Node)
+      ) {
+        setTooltip(false);
+      }
+    };
     window.addEventListener("scroll", handleScroll);
-    handleScroll();
+    window.addEventListener("scroll", handleClickOutside);
+    document.addEventListener("mousedown", handleClickOutside);
 
     return () => {
       window.removeEventListener("scroll", handleScroll);
+      document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
 
-  const hideTooltip = () => {
-    setTooltip(false);
-  };
   return (
-    <div>
+    <div ref={tooltipRef} className="relative">
       <div className="flex flex-col items-start px-6 mx-auto nx-container nx-pl-12 md:nx-pl-0 md:items-center">
         <div className="nx-flex-col md:nx-flex-row nx-flex nx-items-center md:nx-justify-center">
           <a
@@ -38,11 +46,9 @@ const TooltipComponent = ({ children }: { children: React.ReactNode }) => {
             role="link"
             aria-label="tooltip"
             className="nx-focus:outline-none nx-focus:ring-gray-300 nx-rounded-full nx-focus:ring-offset-2 nx-focus:ring-2 nx-focus:bg-gray-200 nx-relative nx-mt-20 md:nx-mt-0"
-            onMouseOver={showTooltip}
-            onFocus={showTooltip}
-            onMouseOut={hideTooltip}
+            onClick={toggleTooltip}
           >
-            <div ref={tooltipRef} className="nx-cursor-pointer">
+            <div className="nx-cursor-pointer">
               <svg
                 width="20"
                 height="20"
@@ -59,46 +65,9 @@ const TooltipComponent = ({ children }: { children: React.ReactNode }) => {
                 id="tooltip"
                 role="tooltip"
                 className={`nx-z-20 ${
-                  boundary && "nx-bottom-10"
+                  boundary ? "nx-bottom-10" : ""
                 } nx-w-64 nx-absolute nx-transition nx-duration-150 nx-ease-in-out nx-left-0 nx-ml-8 nx-shadow-lg nx-bg-white dark:nx-bg-dark-mode-white-2 nx-p-4 nx-rounded`}
               >
-                <svg
-                  className="h-full nx-absolute nx-left-0 nx-ml-2 nx-bottom-0 nx-top-0"
-                  width="9px"
-                  height="16px"
-                  viewBox="0 0 9 16"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlnsXlink="http://www.w3.org/1999/xlink"
-                >
-                  <g
-                    id="Page-1"
-                    stroke="none"
-                    strokeWidth="1"
-                    fill="none"
-                    fillRule="evenodd"
-                  >
-                    <g
-                      id="Tooltips-"
-                      transform="translate(-874.000000, -1029.000000)"
-                    >
-                      <g
-                        id="Group-3-Copy-16"
-                        transform="translate(850.000000, 975.000000)"
-                      >
-                        <g
-                          id="Group-2"
-                          transform="translate(24.000000, 0.000000)"
-                        >
-                          <polygon
-                            id="Triangle"
-                            transform="translate(4.500000, 62.000000) rotate(-90.000000) translate(-4.500000, -62.000000)"
-                            points="4.5 57.5 12.5 66.5 -3.5 66.5"
-                          ></polygon>
-                        </g>
-                      </g>
-                    </g>
-                  </g>
-                </svg>
                 {children}
               </div>
             )}