Update component and logic for the Hover Toolip

[tomsmith8]

Figma: Link

Hover State Behavior

• If a description is available, display it in a tooltip.
• If no description is available, show only the label and nodeKeyValue within the tooltip.

Tooltip Placement & Positioning Adjustments

• Default Position: Tooltip should appear above the node when hovered.
• Edge Handling: Ensure the tooltip remains within view:
  • Top Boundary: If the node is too close to the top, render the tooltip below the node.
  • Right Boundary: If the node is far on the right, position the tooltip at the top left of the node.
  • Left Boundary: If the node is too far left, position the tooltip at the top right of the node.
  • General Constraint: Tooltip should never be clipped by the viewport.

Tooltip Sizing

• The tooltip should have a fixed max width as per the Figma design.
• If the content is smaller than the max width, the tooltip should dynamically adjust to fit the content rather than taking up unnecessary space.

Implementation Notes

• Ensure smooth hover transitions with minimal delay.
• Tooltips should disappear when the cursor moves away.
• Maintain a consistent tooltip styling that aligns with the overall UI.
• Implement logic to dynamically adjust tooltip positioning and size based on the node's screen location and content length.

[Shoaibdev7]

@tomsmith8 I can help?

[saithsab877]

@tomsmith8 assign me?

[MuhammadUmer44]

@tomsmith8 assign?

[tomsmith8]

@Shoaibdev7 any update?

[Shoaibdev7]

@tomsmith8 I am on it and make a PR tonight.