Tooltip - separate "floating" component and optimise documentation in code

[thrbnhrtmnn]

Description / User story

After the discussion on 31.01. about #303 and #742 we made a few decisions how components should be structured. The goal is to also be aligned between design and code.

Currently the Tooltip is not aligned, as there are two components in code but only one in design. This ticket is to optimise the current situation and to follow the new rules.

One decision could be to completely rename the current Tooltip component in code, as it basically is just a reference to the tooltip and provides the needed logic to place the component for example in a slider.

Requirements

• Component grouping - update repo and Storybook #859
• Component grouping - update Figma file #858

Acceptance Criteria

• Tooltip Bubble has been removed in storybook and in the codebase
• Tooltip is now the only tooltip component in Storybook and in the codebase
• The tooltip documentation has been updated:
  • "Floating UI" in the intro text links to the floating ui documentation
  • The dependencies section has been removed (also in the Table of Content)
  • The placement prop description in the props panel has been updated to:

    Select preferred placement of the component to the related element. If the preferred placement is not in the viewport, the component will adjust the placement on its own.

  • The text in the placement documentation should be updated to:

    The Tooltip component can be positioned in any of the following placements: top, top-start, top-end, right, right-start, right-end, bottom, bottom-start, bottom-end, left, left-start, and left-end. Via the placement prop you can select your preferred placement, which the component will display when the viewport allows it. If the preferred placement is not in the viewport, the component will adjust the placement on its own.

Additional information

Pseudo Code / Architecture

Code of Conduct

• I agree to follow this project's Code of Conduct

[thrbnhrtmnn]

@veilvokay was working on this before, so there might be something to work with then already when starting this task. It might make sense to check out the tooltipp-refactor-playground branch

[thrbnhrtmnn]

Updated the ACs as discused @angsherpa456

[thrbnhrtmnn]

As discussed with @faselbaum today, we should change the approach again, sorry for the confusion @angsherpa456 .

New idea: We remove the tooltip bubble and only keep the tooltip component. This makes more sense, as this component is way smarter then the tooltip bubble component. The argument, that the tooltip bubble is the equivalent to the tooltip in design is flawed, as most of our components like i.e. the number input have logic, which is not part of the component in design (i.e. clicking the stepper increases or decreases the value). Similar topic for the tooltip, here the logic for the placement of the tooltip is solved in code with the help of the floating ui library, whereas in design this is done by functionality in Figma (i.e. making the component wrapper hugging the referencing element).

This new approach would now lead to the following ACs (incl. minor optimisations of the documentation):

• Tooltip Bubble has been removed in storybook and in the codebase
• Tooltip is now the only tooltip component in Storybook and in the codebase
• The tooltip documentation has been updated:
  • "Floating UI" in the intro text links to the floating ui documentation
  • The dependencies section has been removed (also in the Table of Content)
  • The placement prop description in the props panel has been updated to:

    Select preferred placement of the component to the related element. If the preferred placement is not in the viewport, the component will adjust the placement on its own.

  • The text in the placement documentation should be updated to:

    The Tooltip component can be positioned in any of the following placements: top, top-start, top-end, right, right-start, right-end, bottom, bottom-start, bottom-end, left, left-start, and left-end. Via the placement prop you can select your preferred placement, which the component will display when the viewport allows it. If the preferred placement is not in the viewport, the component will adjust the placement on its own.