[feature] Add smooth fade-in/fade-out animation for Tooltip component

[pixeltannu]

Description

Currently, the Tooltip appears and disappears instantly on hover without any animation, which feels abrupt and jarring. Adding a smooth fade-in and fade-out animation would make tooltips feel more natural and improve the overall user experience.

Proposed Solution

• Add a smooth fade-in animation (opacity 0 → 1) when Tooltip appears on hover
• Add a fade-out animation (opacity 1 → 0) when Tooltip disappears
• Keep animation duration short (150–200ms) for a snappy feel
• Use CSS transitions (e.g., transition: opacity) for better performance
• Ensure animations work consistently across all Tooltip positions (top, bottom, left, right)

Why this is useful

• Makes Tooltip appearance feel smooth and natural
• Prevents jarring instant pop-in which can feel glitchy
• Improves overall UI polish without affecting core functionality
• Enhances user experience across the entire application

Additional Context

I would like to work on this issue as part of GSSoC 2026. Please assign it to me — I'll raise a PR soon with the implementation.

[github-actions]

✅ Auto-assigned to @pixeltannu (issue opener).

Open your PR by 2026-06-29 (7 days). The bot frees this issue for another contributor after that date.

Reminders:

• ⭐ Star the repo first. The star-check job blocks your merge otherwise.
• PR title: type: short description
• Link this issue in your PR body: Closes #1737

Good luck. 🚀