[Project - Onboarding]: Implement Tooltip functionality (without styling)

[valentinpalkovic]

Implement React Component: Tooltip

Objective:

The objective of this issue is to create a new React component named Tooltip. As discussed in storybookjs/addon-onboarding#12, use Floating UI to create the tooltip!

Component Requirements:

1. Properties:

Property	Type	Description	Required
children	React.ReactNode	Children elements.	Yes
anchorElement	Element	The HTMLElement reference, on which the tooltip should be placed on.	Yes
...tooltipProps	TooltipProps	Tooltip properties for fine-grained control.	No

2. Behaviors:

• The tooltip visibility is controlled outside. The parent component decides whether the tooltip should be displayed or not.
• Use React.Portal to display the tooltip at document.body to guarantee a proper overlay over the underlying content

3. Design (DRAFT):

4. Blocked by:

Tasks

Preview Give feedback

1. [Project - Onboarding]: Evaluate and decide which tooltip library we want to use addon-onboarding#12
   +0
   

Acceptance Criteria:

• The component is implemented according to the requirements described above, or an existing component is taken that fulfills the requirements.
• The component passes all defined test cases and has Stories displaying its states
• The component linked to a figma component in Storybook - speak to designers!
• You should not implement any complex CSS styles! The design is still a work in progress. The component will be finalized design-wise in a separate ticket. Make sure that the properties and the behaviors are implemented accordingly.
• Darkening the background or highlighting the reference HTMLElement is not part of this ticket.