Feature/add tooltip component

[celineung]

Add tooltip component

See DSFR doc

[garronej]

Hey @celineung,

Thank you for your work! 😊 here is my review.

[garronej]

Suggested change

	TooltipOwnerButtonComponent?: JSX.Element;
	button?: JSX.Element;

This is not a component; it's a node. Therefore, it shouldn't be capitalized.

Additionally, I think the API could benefit from a redesign. Whether the button is undefined or not should be inferred from the parameters. If a button exists, then tooltipOwnerProps has no reason to be prsent on the return type. Also, it's somewhat confusing from the user's perspective to have to both mount a node and a component. Ideally, they should just have to use a single TooltipButton with a label and a tooltip prop or something similar.

When designing an API, it's crucial to consider the user's perspective. What makes the most sense for them. What design would constiture a better (DX). The implementation details are secondary; the primary focus should be on fulfilling the API design.

[celineung]

Hi @garronej, thank you for your review :)
I updated the PR and made a new suggestion for the Tooltip Component.

[JeromeBu]

Hi @garronej , I think @celineung has taken your suggestions into account and is waiting for your review

[garronej]

Oh yes sorry!
I'll look at this today

[garronej]

Hi @celineung,

Thank you for your contribution. The idea of applying the id to child elements is more effective than my initial suggestion. I also appreciate the inclusion of type-level tests.
I've merged and then rebased the changes, as there are several points we need to address:

• Instead of wrapping everything in a ``, we should eliminate the wrapper altogether. The `className` and `id` should be applied directly to `fr-tooltip`, and the root should be a fragment (`<>...</>`). Beside wrapping in a span affects the color of the link.
• There's no demonstration story for using this with a link.
• The code contains much duplication and needs to be refactored.
• The `displayChildren` function takes arguments that are already in scope, making it redundant. It's also immediately called with the same arguments, so it should be a node, not a function.
• Hardcoding the string "Information contextuelle" in French is not acceptable; we should use our i18n module. Additionally, this string should be configurable.
• Always use `fr.cx()` to ensure type safety and protect against silent regressions.
• There are variables that are assigned but never used.
• For consistency, let's use `ReactNode` instead of `ReactElement`.
• Import all types as types.
• The `description` field could be a `ReactNode`; there's no reason to limit it.
• To align with MUI conventions, the `description` field should be renamed to `title`.
• The `style` tag is missing, which is a standard element in all our components.

I've opened a new PR.

Thanks for your efforts on this. If you have the time and interest to make these adjustments, that would be great. However, I understand that open-source contributions can be time-consuming, so no pressure to follow up if you can't. Your willingness to contribute is already appreciated.