diff --git a/components/TempDesignSystem/Tooltip/index.tsx b/components/TempDesignSystem/Tooltip/index.tsx
index ce133b5ee..033fc9a04 100644
--- a/components/TempDesignSystem/Tooltip/index.tsx
+++ b/components/TempDesignSystem/Tooltip/index.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react"
+import { PropsWithChildren, useState } from "react"
 
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
@@ -16,8 +16,20 @@ export function Tooltip<P extends TooltipPosition>({
   children,
 }: PropsWithChildren<TooltipProps<P>>) {
   const className = tooltipVariants({ position, arrow })
+  const [isActive, setIsActive] = useState(false)
+
+  function handleToggle() {
+    setIsActive(!isActive)
+  }
+
   return (
-    <div className={styles.tooltipContainer} role="tooltip" aria-label={text}>
+    <div
+      className={styles.tooltipContainer}
+      role="tooltip"
+      aria-label={text}
+      onClick={handleToggle}
+      data-active={isActive}
+    >
       <div className={className}>
         {heading && (
           <Caption type="bold" color="white">
diff --git a/components/TempDesignSystem/Tooltip/tooltip.module.css b/components/TempDesignSystem/Tooltip/tooltip.module.css
index 58676e967..e25433f7c 100644
--- a/components/TempDesignSystem/Tooltip/tooltip.module.css
+++ b/components/TempDesignSystem/Tooltip/tooltip.module.css
@@ -140,3 +140,15 @@
   border-width: 7px 8px 7px 0;
   border-color: transparent var(--UI-Text-Active) transparent transparent;
 }
+
+@media screen and (max-width: 768px) {
+  .tooltipContainer[data-active="true"] .tooltip {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  .tooltipContainer[data-active="false"] .tooltip {
+    visibility: hidden;
+    opacity: 0;
+  }
+}