From 0100244cbc48af2044e1598a0d7426f733dafcaa Mon Sep 17 00:00:00 2001
From: Afnan A <hafnan03@gmail.com>
Date: Tue, 23 Jan 2024 23:43:14 +0500
Subject: [PATCH] Tooltip on icons (#3529)

* Step 3: Set up PostgreSQL Database

* Tooltip on Icons

* Cleaning icon tooltip code

* Fix according to review

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../components/RecordInlineCellContainer.tsx  | 25 ++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
index 79efa52e1aa3..31dfee67afcb 100644
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
@@ -1,7 +1,9 @@
 import { useState } from 'react';
+import { Tooltip } from 'react-tooltip';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
+import kebabCase from 'lodash.kebabcase';
 
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
@@ -69,6 +71,17 @@ const StyledInlineCellBaseContainer = styled.div`
   user-select: none;
 `;
 
+const StyledTooltip = styled(Tooltip)`
+  background-color: ${({ theme }) => theme.background.primary};
+  box-shadow: ${({ theme }) => theme.boxShadow.light};
+
+  color: ${({ theme }) => theme.font.color.primary};
+
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
 type RecordInlineCellContainerProps = {
   IconLabel?: IconComponent;
   label?: string;
@@ -127,7 +140,7 @@ export const RecordInlineCellContainer = ({
       onMouseLeave={handleContainerMouseLeave}
     >
       {(!!IconLabel || !!label) && (
-        <StyledLabelAndIconContainer>
+        <StyledLabelAndIconContainer id={kebabCase(label)}>
           {IconLabel && (
             <StyledIconContainer>
               <IconLabel stroke={theme.icon.stroke.sm} />
@@ -138,6 +151,16 @@ export const RecordInlineCellContainer = ({
               <EllipsisDisplay maxWidth={labelWidth}>{label}</EllipsisDisplay>
             </StyledLabelContainer>
           )}
+          {!showLabel && (
+            <StyledTooltip
+              anchorSelect={`#${kebabCase(label)}`}
+              content={label}
+              clickable
+              noArrow
+              place="left"
+              positionStrategy="fixed"
+            />
+          )}
         </StyledLabelAndIconContainer>
       )}
       <StyledValueContainer>