fix(SW-1003): Moved tooltip on mobile and fixed bug with touch/click

components/TempDesignSystem/Tooltip/index.tsx

@@ -14,12 +14,20 @@ export function Tooltip<P extends TooltipPosition>({
   position,
   arrow,
   children,
+  isTouchable = false,
 }: PropsWithChildren<TooltipProps<P>>) {
   const className = tooltipVariants({ position, arrow })
   const [isActive, setIsActive] = useState(false)
 
   function handleToggle() {
-    setIsActive(!isActive)
+    setIsActive((prevState) => !prevState)
+  }
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault()
+      handleToggle()
+    }
   }
 
   return (
@@ -27,8 +35,10 @@ export function Tooltip<P extends TooltipPosition>({
       className={styles.tooltipContainer}
       role="tooltip"
       aria-label={text}
-      onClick={handleToggle}
-      onTouchStart={handleToggle}
+      tabIndex={0}
+      onClick={isTouchable ? undefined : handleToggle}
+      onTouchStart={isTouchable ? handleToggle : undefined}
+      onKeyDown={handleKeyDown}
       data-active={isActive}
     >
       <div className={className}>