fix: enhance Tooltip component for touch device support

src/components/primitives/Tooltip.tsx

@@ -1,4 +1,5 @@
 import * as RadixTooltip from "@radix-ui/react-tooltip";
+import { useEffect, useState } from "react";
 import { useTheme } from "../../context/Theme.context";
 import type { Component } from "../../utils/types";
 import Text from "../primitives/Text";
@@ -13,12 +14,27 @@ export type TooltipProps = Component<{
 
 export default function Tooltip({ helper, onOpen, children, icon = true, className }: TooltipProps) {
   const { vars } = useTheme();
+  const [open, setOpen] = useState(false);
+  const [isTouchDevice, setIsTouchDevice] = useState(false);
+
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    if (!("ontouchstart" in window)) return;
+    setIsTouchDevice(true);
+  }, []);
 
   return (
     <RadixTooltip.Provider delayDuration={0}>
-      <RadixTooltip.Root onOpenChange={open => open && onOpen?.()}>
+      <RadixTooltip.Root
+        open={isTouchDevice ? open : undefined}
+        onOpenChange={isOpen => {
+          if (isTouchDevice) setOpen(isOpen);
+          if (isOpen) onOpen?.();
+        }}
+        delayDuration={0}>
         <RadixTooltip.Trigger asChild>
-          <span className="flex items-center gap-sm">
+          {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
+          <span className="flex items-center gap-sm" onClick={isTouchDevice ? () => setOpen(prev => !prev) : undefined}>
             <div>{children}</div>
             {!!icon && <Icon className="text-main-12" remix="RiQuestionFill" alt="Tooltip" />}
           </span>