Add title/tooltip on hover icons.

[seAfnan]

Scope & Context

There should a title or nice tooltip on hover icons to clarify its purpose.

Current behavior

Now there is no title/tooltip when we hover over icons. They looks almost same and we don't know their purpose.

Expected behavior

There should be a nice tooltip like title on hover.

[FelixMalfait]

Thanks!

Component that could eventually be useful: https://storybook.twenty.com/?path=/story/ui-display-tooltip-tooltip--default&args=place:left;noArrow:!true

cc @Bonapara for approval and guidance

[Bonapara]

Thanks @seAfnan!

Let's use the component Felix suggested:

Component that could eventually be useful: https://storybook.twenty.com/?path=/story/ui-display-tooltip-tooltip--default&args=place:left;noArrow:!true

Please adjust the tooltip to display at the top. This will ensure the associated value remains visible during hover. Set noArrow to true

[daallgeier]

Preferably i'd also see the name of the field next to it especially when it's Empty.

Replacing the greyed out Empty with a greyed out Company for example seems more useful to me.

[seAfnan]

Thanks @seAfnan!

Let's use the component Felix suggested:

Component that could eventually be useful: https://storybook.twenty.com/?path=/story/ui-display-tooltip-tooltip--default&args=place:left;noArrow:!true

Please adjust the tooltip to display at the top. This will ensure the associated value remains visible during hover. Set noArrow to true

IconMap -> Location
IconMoneyBag -> Currency
IconCalender -> Established
IconLink -> Website/Blog
IconUsers -> Members/Employees
IconTarget -> (please suggest)
IconBrandLinkedin -> Linkedin
IconBrandX -> Twitter/X

I am working on this, please suggest the text to show on tooltip.

[FelixMalfait]

thanks @seAfnan the tooltip label should come from the metadata framework, we don't want to hardcode it.
When the app is loaded initially the frontend does a request to the backend ObjectMetadataItems and retrieve the list of all objects/fields for the workspace. That metadata is then made available through the frontend

[FelixMalfait]

@daallgeier good suggestion. @Bonapara is making the calls on design so leaving it to him to decide!

[Bonapara]

@daallgeier, this is a great idea! The only thing is that it should only be implemented when the field label is hidden (to avoid duplicating the field name) such as under:

But this is still a good idea that would especially be interesting for kanban cards:

To help the understanding, I believe we should display the field name on the show page:

This does not resolve the issue. We still want to display a tooltip over the field icon. It will be particularly useful on the Kanban board where the field name is hidden.

@daallgeier, I'm creating a new issue to tackle two things: 1. Switch the placeholder from Empty to Field name when no field name/label is shown, and 2. Making the field name visible by default on shows.

[Bonapara]

Created #3406 to address this. Thanks @daallgeier for the idea 🙌

[FelixMalfait]

Closing as this one is also being addressed by #3529. Thanks for the suggestion and implementation @seAfnan!