Storybook Documentation - Component: Tooltip

[thrbnhrtmnn]

Description / User Story

With this task we want to make the Tooltip Component page in Storybook look like the template from design.

---

Requirements (ticket needs to be adjusted after these are done)

• Tooltip - refactor component to use floating-ui #461

---

Acceptance Criteria

• Component Page has the same structure as the design template (in the following order):
  • Headline & Intro Text incl. a list of anchor links to all following sections
  • Docs Area with Example and all Props (see which props should be displayed for this component in the section below)
  • Appearance
    • Placement (incl. placement = top, top-start, top-end, right, right-start, right-end, bottom, bottom-start, bottom-end, left, left-start, and left-end)
    • Elevation (with and without elevation: elevation = true & elevation = false)
    • Has Arrow (with and without arrow: hasArrow = true & hasArrow = false)
  • Content / Settings
    • Message
  • Dependencies
    • Tooltip Bubble
  • Examples
    • Reference Element (including a static reference where the tooltip appears on hover event)
    • Virtual Reference (where a mouse event is used as a virtual reference)
• Component Page includes the texts as defined in the section below (incl. non default values for the shown examples)
• Component Page text styles (uppercase, lowercase, spacing) correspond the the design template
• Component Page spacing corresponds to design template
• Component Page colors correspond to design template

---

Props

See this table page "Tooltip" for all props that should be displayed for the component, incl. their description, default values and the type of controls. Props that do not appear and that can be removed, should also be removed (not including theme for example, because this is needed for all components, but still not part of the props section).

If the props in the list are not the same as the component currently uses, just leave a comment in column G in the excel and a follow-up task will be created. Fixing the components is not part of this ticket.

---

Content / Texts

See this table page "Documentation Texts" for all texts that should be displayed for the component. Filter column A in cell A3 to only show you the texts of this components.

For the texts please change "[component name]" with "Tooltip" and "[componentName]" with "tooltip".

Also all the examples in the documentation below the Props should not use the default values, but they should use descriptive texts for Label, Placeholder and other text fields. Some examples are already given in the template.

---

Background information

• Example of a collapsible Props Section can be seen here

[bar-tay]

feature/494-storybook-tooltip

[thrbnhrtmnn]

Feedback @bar-tay :

• Structure: We should put the Tooltip stories inside a separate folder called "Tooltip", so the Tooltip and the Tooltip Bubble are both folders that are placed within the Tooltip folder within the Feedback folder. The structure would then be similar to the RadioGroup, which consists of Radio and RadioGroup.
• Props Panel: Please move hasArrow to the Appearance Section, below between elevation and offset (elevation > hasArrow > offset)

After this the story can be merged and the issue can be closed.

@angelicahoyss , I have a few thoughts to make the documentation even better in the future, if you agree maybe you could create a few issues for that:

• The story to display all options of the placeholder prop is very long, maybe we could display the examples in a more condensed way
• Elevation, HasArrow and Message are all props that are also part of the Tooltip Bubble, maybe we do not need them in the Tooltip then?
• To make the documentation even more condensed we could also remove the second or third example of the offset prop, two examples might be enough already.

[thrbnhrtmnn]

@bar-tay this looks already really nice, still I would like a few things to be changed:

• Props Panel: Please move hasArrow to the Appearance Section, below between elevation and offset (elevation > hasArrow > offset)
• Props Panel: We should change the default for message (and also for the example stories). Please change it to: "Message-text"
• Placement Example: Please move the labels below the reference boxes into the message, this way this story also works in dark mode and the message texts are describing the instance. Please capitalize the first letter when doing so (i.e. "Top", "Top-start").
• Placement Example: Can you change the layout, so that if the viewport width only allows for two blocks, the next row also has two blocks?
• Elevation Example: Please change the messages to "With elevation" and "Without elevation"
• HasArrow Example: Please change the messages to "With offset" and "Without offset" and only show one example without offset.
• Offset Example: Please change the messages to "With elevation" and "Without elevation"
• Message Section: This section is not really needed, we also do not explain for example how the label for the TextButton works. Therefor I would remove this whole section. Also remove it in the TOC, where it currently is appearing twice.
• Dependencies Example: Please change the messages to "This is the tooltip bubble"

[thrbnhrtmnn]

Hey @bar-tay , the documentation looks good and we can close the issue after the merge, but it seems like the offset is currently not working. I will create a bug issue for that. It may have been broken after we fixed the show code function last Friday.