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:

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

---

Checklist:

• I have performed a self-review of my own code.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation.
• I have added unit tests that prove my feature works effectively.
• 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

[abdou6666]

Awesome work!

One small suggestion: the component name could be improved for better clarity and alignment with its purpose. Perhaps calling it MuiTooltipWrapper would make its functionality more evident.

[TheCoderAdi]

Thank you for the suggestion! I completely agree that a more descriptive name like MuiTooltipWrapper would better convey the component's purpose. It’s a great idea, and I’ll make the update accordingly.

[TheCoderAdi]

Hello @abdou6666,

I have updated the component name to MuiTooltipWrapper as suggested. Please review the changes and let me know if there’s anything else you’d like me to adjust.

Thank you!

[marrouchi]

Suggested change

	export const CustomTip: React.FC<TooltipProps> = ({
	children,
	text,
	position = "top",
	}) => {
	return (
	<MuiTooltip title={text} placement={position} arrow>
	export const InfoTip: React.FC<MuiTooltipProps> = ({
	children,
	position = "top",
	...props
	}) => {
	return (
	<MuiTooltip {...props} placement={position} arrow>

I suggest re-using the original MUI props.

[TheCoderAdi]

I've updated the MuiTooltipWrapper component to re-use MuiTooltipProps directly, allowing full flexibility with all MUI props.