[Project - Onboarding]: Evaluate and decide which tooltip library we want to use

[valentinpalkovic]

The new onboarding flow relies heavily on tooltips for the step-by-step walkthrough guide. Evaluate which library might help to implement these tooltips. We could also create a self-made solution.

Requirements:

• The library should be able to take DOM references from the manager's HTML elements to place the tooltip upon
• Ideally, we don't want to calculate positions manually, but the library should do this instead (e.g., popper, react-popper)
• The library should support offsets for the tooltips.

Design examples (DRAFT):

Non-goals:

• The library doesn't have to support highlighting the selected element. This will be implemented separately
• The library doesn't have to support darkening the background. This will be implemented separately

Acceptance criteria:

• Decide on a library that supports the requirements
• Do NOT implement the functionality. This is just a research task
• Document the choice in the tracking ticket

[valentinpalkovic]

The Tooltip component in the mono repository cannot be used for this use case because it requires wrapping the trigger element. The trigger element is not wrappable because it is in the manager. Instead, we have to find a way to pass a HTMLReference to the tooltip hook/react element, to actually show it.

[valentinpalkovic]

Radix UI's Tooltip component cannot be used, because it also requires the trigger to be wrapped by a React component. Since the trigger is outside of the onboardings React Context, this is not possible.

[valentinpalkovic]

Floating UI provides building blocks to create a tooltip experience. These building blocks can be used to set the trigger's DOM Element as a reference to trigger the tooltip. As for now, I will decide to use Floating UI to build the tooltip.

EDIT:
We will use react-joyride to implement the step-by-step tour