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

ref: N25B-450

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

@@ -65,7 +65,7 @@ export default function TriggerNode(props: NodeProps<TriggerNode>) {
       <div className={"flex-row gap-md"}>Plan{data.plan ? (": " + data.plan.name) : ""} is currently {data.plan ? "" : "not"} set. {data.plan ? "🟢" : "🔴"}</div>
       <MultiConnectionHandle type="source" position={Position.Right} id="TriggerSource" rules={[
         allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"data"}]),
-      ]}/>
+      ]} title="Connect to any number of phaseNodes"/>
       <SingleConnectionHandle
         type="target"
         position={Position.Bottom}
@@ -74,6 +74,7 @@ export default function TriggerNode(props: NodeProps<TriggerNode>) {
         rules={[
           allowOnlyConnectionsFromType(['basic_belief']),
         ]}
+        title="Connect to a beliefNode or a set of beliefs combined using the AND/OR node"
       />
       
       <MultiConnectionHandle
@@ -84,6 +85,7 @@ export default function TriggerNode(props: NodeProps<TriggerNode>) {
         rules={[
           allowOnlyConnectionsFromType(['goal']),
         ]}
+        title="Connect to any number of goalNodes"
       />
 
       <PlanEditorDialog