feat: added title based tooltips and updated handle styling to reflect in and output handles

ref: N25B-450

src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx

@@ -118,9 +118,11 @@ export default function GoalNode({id, data}: NodeProps<GoalNode>) {
       </div>
       <MultiConnectionHandle type="source" position={Position.Right} id="GoalSource" rules={[
         allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"data"}]),
-      ]}/>
+      ]} title="Connect to any number of phase and/or goalNode(-s)"/>
 
-      <MultiConnectionHandle type="target" position={Position.Bottom} id="GoalTarget" rules={[allowOnlyConnectionsFromType(["goal"])]}/>
+      <MultiConnectionHandle type="target" position={Position.Bottom} id="GoalTarget" rules={[
+        allowOnlyConnectionsFromType(["goal"])]
+      } title="Connect to any number of goalNode(-s)"/>
 
 
     </div>