Update Tooltip.tsx

components/Tooltip.tsx

@@ -1,20 +1,17 @@
 import React from "react";
-import { Tooltip as ReactTooltip } from "react-tooltip";
+import ReactTooltip from "react-tooltip";
 
-type TooltipProps = {
-  content: string;
-  children: React.ReactNode;
-};
-
-const Tooltip: React.FC<TooltipProps> = ({ content, children }) => {
-  return (
-    <div className="relative group">
-      {children}
-      <div className="absolute left-0 w-48 bg-black text-white text-xs rounded-lg px-3 py-2 invisible group-hover:visible transition-opacity duration-300 z-10">
-        {content}
-      </div>
-    </div>
-  );
-};
+const Tooltip: React.FC<{ id: string; text: string }> = ({ id, text }) => (
+  <>
+    <span
+      className="relative cursor-pointer underline"
+      data-tip={text}
+      data-for={id}
+    >
+      ?
+    </span>
+    <ReactTooltip id={id} effect="solid" />
+  </>
+);
 
 export default Tooltip;