551 tooltip component

[TheCoderAdi]

Motivation

This update introduces localized strings for English (en) and French (fr) to enhance user accessibility and usability in a multilingual environment. Additionally, a new CustomTip component has been created to provide enhanced tooltip functionality across the application. These changes improve user experience by standardizing tooltips and enabling better visual guidance in the app. The CustomTip component has been integrated into key files like Diagrams.tsx and Header.tsx.

Fixes #551

---

Type of Change:

• [x] New feature (non-breaking change which adds functionality)

---

Checklist:

• [x] I have performed a self-review of my own code.
• [x] I have commented my code, particularly in hard-to-understand areas.
• [x] I have made corresponding changes to the documentation.
• [x] I have added unit tests that prove my feature works effectively.
• [x] New and existing unit tests pass locally with my changes.

---

Changes Made:

Localization Files:

1. English (translation.json)

   • "profile": "Profile"
   • "add_new_flow": "Add new flow"
   • "toggle_menu": "Toggle menu"

2. French (translation.json)

   • "profile": "Profil"
   • "add_new_flow": "Ajouter un nouveau flux"
   • "toggle_menu": "Basculer le menu"

New Component: CustomTip

• Created a reusable tooltip component using Material-UI's Tooltip.
• Supports configurable text and position with a default placement of "top".

Integration:

• Integrated CustomTip in:
  • frontend/src/components/visual-editor/v2/Diagrams.tsx
  • frontend/src/layout/Header.tsx

Screenshorts