Design System: Tooltips

[zakhap]

Description

• Base component and all directions
  • Max width of entire component = 232px
  • Max of two lines

Figma: https://www.figma.com/file/eIVp33a1oCu0AtcLwSbGjr/%F0%9F%9A%A7-Components-and-Patterns?type=design&node-id=481-4642&t=KXxdmSCtWpGv6n0A-0

Acceptance Criteria

• New Tooltip component created so it doesn't trickle across the site or interfere with existing CSS.
  • Use MUIBase
• Add to component kit and make auditable via Storybook Stories.

[masvelio]

@MuonShot @zakhap should we teed this up for this week?

[CowMuon]

Please note a requirement here is to use mui-base.

[martins87]

Please note a requirement here is to use mui-base.

The thing is: mui-base does not have the Tooltip component implemented yet: here

Options:

1. Implement from scratch
2. Use Joy UI. The library is similar to Base UI and already has the Tooltip component.

If yes to second question, PR is here: #4514

Cc @jnaviask @zakhap @masvelio

[masvelio]

That's a bummer. Some time ago I proposed that we could use https://www.radix-ui.com/ as they have a lot of components and generally the lib has great reviews. If we don't want to use anything else though, we should keep using mui-base. In this case, we have to stick to their popper. We use it currently for the tooltip component. Maybe we can try using our current component (just adjust styling) instead of creating new one?

[martins87]

That's a bummer. Some time ago I proposed that we could use https://www.radix-ui.com/ as they have a lot of components and generally the lib has great reviews. If we don't want to use anything else though, we should keep using mui-base. In this case, we have to stick to their popper. We use it currently for the tooltip component. Maybe we can try using our current component (just adjust styling) instead of creating new one?

I'm down for using only one ui library. We could use mui-base but it's on its early stages, so changing from library to library is not a good idea. I used mui on previous projects, they also have a lot of components already built.

Popper would be a good one.

@zakhap @jnaviask @MuonShot thoughts?

[martins87]

@zakhap component is ready for review. Just a last question about its behaviour:

Should the tooltip appear when element is clicked or just hovered?