Use React Tooltip.

lynxkite-app/web/package-lock.json

@@ -30,6 +30,7 @@
         "react-error-boundary": "^5.0.0",
         "react-markdown": "^9.0.1",
         "react-router-dom": "^7.5.2",
+        "react-tooltip": "^5.28.1",
         "swr": "^2.2.5",
         "unplugin-icons": "^0.21.0",
         "y-monaco": "^0.1.6",
@@ -940,6 +941,31 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
+      "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.13",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
+      "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
+      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
+      "license": "MIT"
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -2879,6 +2905,12 @@
       "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==",
       "license": "MIT"
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -6239,6 +6271,20 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/react-tooltip": {
+      "version": "5.28.1",
+      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.28.1.tgz",
+      "integrity": "sha512-ZA4oHwoIIK09TS7PvSLFcRlje1wGZaxw6xHvfrzn6T82UcMEfEmHVCad16Gnr4NDNDh93HyN037VK4HDi5odfQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.1",
+        "classnames": "^2.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

lynxkite-app/web/package.json

@@ -33,6 +33,7 @@
     "react-error-boundary": "^5.0.0",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^7.5.2",
+    "react-tooltip": "^5.28.1",
     "swr": "^2.2.5",
     "unplugin-icons": "^0.21.0",
     "y-monaco": "^0.1.6",

lynxkite-app/web/src/{workspace/nodes/NodeDocumentation.tsx → Tooltip.tsx}

@@ -1,16 +1,21 @@
+import { useId } from "react";
 import Markdown from "react-markdown";
+import { Tooltip as ReactTooltip } from "react-tooltip";
 
-export default function NodeDocumentation(props: any) {
+export default function Tooltip(props: any) {
+  const id = useId();
   if (!props.doc) return null;
   return (
-    <div className="dropdown dropdown-hover dropdown-top dropdown-end title-icon">
-      {props.children}
-      <div className="node-documentation dropdown-content" style={{ width: props.width }}>
+    <>
+      <a data-tooltip-id={id} tabIndex={0}>
+        {props.children}
+      </a>
+      <ReactTooltip id={id} className="tooltip" place="top-end">
         {props.doc.map?.(
           (section: any, i: number) =>
             section.kind === "text" && <Markdown key={i}>{section.value}</Markdown>,
         ) ?? <Markdown>{props.doc}</Markdown>}
-      </div>
-    </div>
+      </ReactTooltip>
+    </>
   );
 }

lynxkite-app/web/src/index.css

@@ -68,11 +68,6 @@ body {
     font-size: 12px;
   }
 
-  .title-icon {
-    margin-left: 5px;
-    float: right;
-  }
-
   .node-container {
     padding: 8px;
     position: relative;
@@ -91,16 +86,20 @@ body {
       display: flex;
       flex-direction: column;
     }
+  }
 
-    .node-documentation {
-      padding: 8px;
-      border-radius: 4px;
-      background: #fffa;
-      box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.1);
-      backdrop-filter: blur(10px);
-      font-size: 12px;
-      font-weight: initial;
-    }
+  .tooltip {
+    padding: 8px;
+    border-radius: 4px;
+    opacity: 1;
+    text-align: left;
+    background: #fffa;
+    color: black;
+    box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(10px);
+    font-size: 16px;
+    font-weight: initial;
+    max-width: 300px;
   }
 
   .expanded .lynxkite-node {
@@ -123,6 +122,13 @@ body {
     --status-color-2: #0000;
     --status-color-3: #0000;
     transition: --status-color-1 0.3s, --status-color-2 0.3s, --status-color-3 0.3s;
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+
+    .title-title {
+      flex: 1;
+    }
   }
 
   .lynxkite-node .title.active {

lynxkite-app/web/src/workspace/nodes/LynxKiteNode.tsx

@@ -11,7 +11,7 @@ import Dots from "~icons/tabler/dots.jsx";
 import Help from "~icons/tabler/question-mark.jsx";
 // @ts-ignore
 import Skull from "~icons/tabler/skull.jsx";
-import NodeDocumentation from "./NodeDocumentation";
+import Tooltip from "../../Tooltip";
 
 interface LynxKiteNodeProps {
   id: string;
@@ -91,22 +91,20 @@ function LynxKiteNodeComponent(props: LynxKiteNodeProps) {
           style={titleStyle}
           onClick={titleClicked}
         >
-          {data.title}
+          <span className="title-title">{data.title}</span>
           {data.error && (
-            <span className="title-icon">
+            <Tooltip doc={`Error: ${data.error}`}>
               <AlertTriangle />
-            </span>
+            </Tooltip>
           )}
           {expanded || (
-            <span className="title-icon">
+            <Tooltip doc="Click to expand node">
               <Dots />
-            </span>
+            </Tooltip>
           )}
-          <NodeDocumentation doc={data.meta?.value?.doc} width={props.width - 60}>
-            <button tabIndex={0}>
-              <Help />
-            </button>
-          </NodeDocumentation>
+          <Tooltip doc={data.meta?.value?.doc}>
+            <Help />
+          </Tooltip>
         </div>
         {expanded && (
           <>

lynxkite-app/web/src/workspace/nodes/NodeParameter.tsx

@@ -3,7 +3,7 @@ import { useRef } from "react";
 import ArrowsHorizontal from "~icons/tabler/arrows-horizontal.jsx";
 // @ts-ignore
 import Help from "~icons/tabler/question-mark.jsx";
-import NodeDocumentation from "./NodeDocumentation";
+import Tooltip from "../../Tooltip";
 import NodeGroupParameter from "./NodeGroupParameter";
 
 const BOOLEAN = "<class 'bool'>";
@@ -15,11 +15,9 @@ const MODEL_OUTPUT_MAPPING = "<class 'lynxkite_graph_analytics.ml_ops.ModelOutpu
 
 function ParamName({ name, doc }: { name: string; doc: string }) {
   const help = doc && (
-    <NodeDocumentation doc={doc} width={200}>
-      <button tabIndex={0}>
-        <Help />
-      </button>
-    </NodeDocumentation>
+    <Tooltip doc={doc} width={200}>
+      <Help />
+    </Tooltip>
   );
   return (
     <div className="param-name-row">
@@ -230,12 +228,12 @@ export default function NodeParameter({ name, value, meta, data, setParam }: Nod
   }
   return meta?.type?.format === "collapsed" ? (
     <label className="param">
-      <ParamName name={name} />
+      <ParamName name={name} doc={doc} />
       <button className="collapsed-param">⋯</button>
     </label>
   ) : meta?.type?.format === "textarea" ? (
     <label className="param">
-      <ParamName name={name} />
+      <ParamName name={name} doc={doc} />
       <textarea
         className="textarea textarea-bordered w-full"
         rows={6}
@@ -248,7 +246,7 @@ export default function NodeParameter({ name, value, meta, data, setParam }: Nod
     <NodeGroupParameter meta={meta} data={data} setParam={setParam} />
   ) : meta?.type?.enum ? (
     <label className="param">
-      <ParamName name={name} />
+      <ParamName name={name} doc={doc} />
       <select
         className="select select-bordered w-full"
         value={value || meta.type.enum[0]}
@@ -275,17 +273,17 @@ export default function NodeParameter({ name, value, meta, data, setParam }: Nod
     </div>
   ) : meta?.type?.type === MODEL_TRAINING_INPUT_MAPPING ? (
     <label className="param">
-      <ParamName name={name} />
+      <ParamName name={name} doc={doc} />
       <ModelMapping value={value} data={data} variant="training input" onChange={onChange} />
     </label>
   ) : meta?.type?.type === MODEL_INFERENCE_INPUT_MAPPING ? (
     <label className="param">
-      <ParamName name={name} />
+      <ParamName name={name} doc={doc} />
       <ModelMapping value={value} data={data} variant="inference input" onChange={onChange} />
     </label>
   ) : meta?.type?.type === MODEL_OUTPUT_MAPPING ? (
     <label className="param">
-      <ParamName name={name} />
+      <ParamName name={name} doc={doc} />
       <ModelMapping value={value} data={data} variant="output" onChange={onChange} />
     </label>
   ) : (