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 <[email protected]>
twentyhq · Jan 23, 2024 · 0100244 · 0100244
1 parent d176ba9
commit 0100244
Showing 1 changed file with 24 additions and 1 deletion.
diff --git a/...ont/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx b/...ont/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>