Add Tooltips to Kanban Card Icons for Better Clarity

[Bonapara]

Current Behavior

Currently, the field icons displayed on each kanban card do not have any tooltips when hovered over. Users must rely on their knowledge or guess what each icon represents.

Desired Behavior

When a user hovers over each field icon within a kanban card, a tooltip should appear displaying the name of the field. For example, hovering over the dollar sign icon should show a tooltip with the text "Amount," hovering over the calendar icon should display "Close Date," and so on.

Make sure there is a slight delay when hovering the icon before displaying the tooltip: #5727

[greptile-apps]

To add tooltips to the icons on Kanban cards:

1. Import AppTooltip from the twenty-ui package in the relevant component file where Kanban cards are rendered.

import { AppTooltip } from 'twenty-ui';

2. Wrap each icon with the AppTooltip component, providing the appropriate tooltip text.

Example:

<AppTooltip title="Amount">
  <DollarSignIcon />
</AppTooltip>

<AppTooltip title="Close Date">
  <CalendarIcon />
</AppTooltip>

3. Ensure there is a slight delay before displaying the tooltip by setting the enterDelay prop.

<AppTooltip title="Amount" enterDelay={300}>
  <DollarSignIcon />
</AppTooltip>

Refer to TaskRow.tsx for an example of how tooltips are implemented with icons.

References

[Manab-upadhyay]

hello @Bonapara , please assign me this issue.

[atharvParlikar]

I was just looking around and found this

also I got the tooltip to appear just by flipping disableTooltip to false in a RecordInlineCell's field context but wasn't so sure after reading the above comment.

[Bonapara]

Sorry @Manab-upadhyay, I wasn't quick enough. Thanks @atharvParlikar for the PR!