Feat: Add tooltips on new column menu (#1893)

* implemented tooltip for view fields

* console.log

front/src/modules/companies/constants/companiesAvailableColumnDefinitions.tsx

@@ -43,6 +43,7 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
       },
       isVisible: true,
       buttonIcon: IconArrowUpRight,
+      infoTooltipContent: 'The company name.',
       basePathToShowPage: '/companies/',
     } satisfies ColumnDefinition<FieldChipMetadata>,
     {
@@ -58,6 +59,8 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
       },
       isVisible: true,
       buttonIcon: IconPencil,
+      infoTooltipContent:
+        'The company website URL. We use this url to fetch the company icon.',
     } satisfies ColumnDefinition<FieldURLMetadata>,
     {
       key: 'accountOwner',
@@ -71,6 +74,8 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
         relationType: Entity.User,
       },
       isVisible: true,
+      infoTooltipContent:
+        'Your team member responsible for managing the company account.',
     } satisfies ColumnDefinition<FieldRelationMetadata>,
     {
       key: 'createdAt',
@@ -83,6 +88,7 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
         fieldName: 'createdAt',
       },
       isVisible: true,
+      infoTooltipContent: "Date when the company's record was created.",
     } satisfies ColumnDefinition<FieldDateMetadata>,
     {
       key: 'employees',
@@ -97,6 +103,7 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
         placeHolder: 'Employees',
       },
       isVisible: true,
+      infoTooltipContent: 'Number of employees in the company.',
     } satisfies ColumnDefinition<FieldNumberMetadata>,
     {
       key: 'linkedin',
@@ -111,6 +118,7 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
       },
       isVisible: true,
       buttonIcon: IconPencil,
+      infoTooltipContent: 'The company Linkedin account.',
     } satisfies ColumnDefinition<FieldURLMetadata>,
     {
       key: 'address',
@@ -124,6 +132,7 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
         placeHolder: 'Addre​ss', // Hack: Fake character to prevent password-manager from filling the field
       },
       isVisible: true,
+      infoTooltipContent: 'The company address.',
     } satisfies ColumnDefinition<FieldTextMetadata>,
     {
       key: 'idealCustomerProfile',
@@ -136,6 +145,8 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
         fieldName: 'idealCustomerProfile',
       },
       isVisible: false,
+      infoTooltipContent:
+        'Ideal Customer Profile:  Indicates whether the company is the most suitable and valuable customer for you.',
     } satisfies ColumnDefinition<FieldBooleanMetadata>,
     {
       key: 'annualRecurringRevenue',
@@ -148,6 +159,8 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
         fieldName: 'annualRecurringRevenue',
         placeHolder: 'ARR',
       },
+      infoTooltipContent:
+        'Annual Recurring Revenue: The actual or estimated annual revenue of the company.',
     } satisfies ColumnDefinition<FieldMoneyMetadata>,
     {
       key: 'xUrl',
@@ -162,5 +175,6 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<FieldMetadata
       },
       isVisible: false,
       buttonIcon: IconPencil,
+      infoTooltipContent: 'The company Twitter account.',
     } satisfies ColumnDefinition<FieldURLMetadata>,
   ];

front/src/modules/people/constants/peopleAvailableColumnDefinitions.tsx

@@ -42,6 +42,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
         entityType: Entity.Person,
       },
       buttonIcon: IconArrowUpRight,
+      infoTooltipContent: 'Contact’s first and last name.',
       basePathToShowPage: '/person/',
     } satisfies ColumnDefinition<FieldDoubleTextChipMetadata>,
     {
@@ -56,6 +57,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
         placeHolder: 'Ema​il', // Hack: Fake character to prevent password-manager from filling the field
       },
       buttonIcon: IconPencil,
+      infoTooltipContent: 'Contact’s Email.',
     } satisfies ColumnDefinition<FieldEmailMetadata>,
     {
       key: 'company',
@@ -68,6 +70,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
         fieldName: 'company',
         relationType: Entity.Company,
       },
+      infoTooltipContent: 'Contact’s company.',
     } satisfies ColumnDefinition<FieldRelationMetadata>,
     {
       key: 'phone',
@@ -81,6 +84,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
         placeHolder: 'Phon​e', // Hack: Fake character to prevent password-manager from filling the field
       },
       buttonIcon: IconPencil,
+      infoTooltipContent: 'Contact’s phone number.',
     } satisfies ColumnDefinition<FieldPhoneMetadata>,
     {
       key: 'createdAt',
@@ -92,6 +96,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
       metadata: {
         fieldName: 'createdAt',
       },
+      infoTooltipContent: 'Date when the contact was added.',
     } satisfies ColumnDefinition<FieldDateMetadata>,
     {
       key: 'city',
@@ -104,6 +109,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
         fieldName: 'city',
         placeHolder: 'Cit​y', // Hack: Fake character to prevent password-manager from filling the field
       },
+      infoTooltipContent: 'Contact’s city.',
     } satisfies ColumnDefinition<FieldTextMetadata>,
     {
       key: 'jobTitle',
@@ -116,6 +122,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
         fieldName: 'jobTitle',
         placeHolder: 'Job title',
       },
+      infoTooltipContent: 'Contact’s job title.',
     } satisfies ColumnDefinition<FieldTextMetadata>,
     {
       key: 'linkedin',
@@ -129,6 +136,7 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
         placeHolder: 'LinkedIn',
       },
       buttonIcon: IconPencil,
+      infoTooltipContent: 'Contact’s Linkedin account.',
     } satisfies ColumnDefinition<FieldURLMetadata>,
     {
       key: 'x',
@@ -142,5 +150,6 @@ export const peopleAvailableColumnDefinitions: ColumnDefinition<FieldMetadata>[]
         placeHolder: 'X',
       },
       buttonIcon: IconPencil,
+      infoTooltipContent: 'Contact’s Twitter account.',
     } satisfies ColumnDefinition<FieldURLMetadata>,
   ];

front/src/modules/pipeline/constants/pipelineAvailableFieldDefinitions.tsx

@@ -27,6 +27,8 @@ export const pipelineAvailableFieldDefinitions: BoardFieldDefinition<FieldMetada
         fieldName: 'closeDate',
       },
       isVisible: true,
+      infoTooltipContent:
+        'Specified date by which an opportunity must be completed.',
     } satisfies BoardFieldDefinition<FieldDateMetadata>,
     {
       key: 'amount',
@@ -39,6 +41,7 @@ export const pipelineAvailableFieldDefinitions: BoardFieldDefinition<FieldMetada
         placeHolder: '0',
       },
       isVisible: true,
+      infoTooltipContent: 'Potential monetary value of a business opportunity.',
     } satisfies BoardFieldDefinition<FieldNumberMetadata>,
     {
       key: 'probability',
@@ -50,6 +53,8 @@ export const pipelineAvailableFieldDefinitions: BoardFieldDefinition<FieldMetada
         fieldName: 'probability',
       },
       isVisible: true,
+      infoTooltipContent:
+        "Level of certainty in the lead's potential to convert into a success.",
     } satisfies BoardFieldDefinition<FieldProbabilityMetadata>,
     {
       key: 'pointOfContact',
@@ -64,5 +69,6 @@ export const pipelineAvailableFieldDefinitions: BoardFieldDefinition<FieldMetada
       },
       isVisible: true,
       buttonIcon: IconPencil,
+      infoTooltipContent: 'Primary contact within the company.',
     } satisfies BoardFieldDefinition<FieldRelationMetadata>,
   ];

front/src/modules/ui/button/components/FloatingIconButton.tsx

@@ -21,17 +21,21 @@ export type FloatingIconButtonProps = {
   disabled?: boolean;
   focus?: boolean;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  isActive?: boolean;
 };
 
 const StyledButton = styled.button<
   Pick<
     FloatingIconButtonProps,
-    'size' | 'position' | 'applyShadow' | 'applyBlur' | 'focus'
+    'size' | 'position' | 'applyShadow' | 'applyBlur' | 'focus' | 'isActive'
   >
 >`
   align-items: center;
   backdrop-filter: ${({ applyBlur }) => (applyBlur ? 'blur(20px)' : 'none')};
-  background: ${({ theme }) => theme.background.primary};
+  background: ${({ theme, isActive }) =>
+    !!isActive
+      ? theme.background.transparent.medium
+      : theme.background.primary};
   border: ${({ focus, theme }) =>
     focus ? `1px solid ${theme.color.blue}` : 'transparent'};
   border-radius: ${({ position, theme }) => {
@@ -87,7 +91,8 @@ const StyledButton = styled.button<
   }}
 
   &:hover {
-    background: ${({ theme }) => theme.background.transparent.lighter};
+    background: ${({ theme, isActive }) =>
+      !!isActive ?? theme.background.transparent.lighter};
   }
 
   &:active {
@@ -110,6 +115,7 @@ export const FloatingIconButton = ({
   disabled = false,
   focus = false,
   onClick,
+  isActive,
 }: FloatingIconButtonProps) => {
   const theme = useTheme();
   return (
@@ -122,6 +128,7 @@ export const FloatingIconButton = ({
       className={className}
       position={position}
       onClick={onClick}
+      isActive={isActive}
     >
       {Icon && <Icon size={theme.icon.size.md} />}
     </StyledButton>

front/src/modules/ui/button/components/FloatingIconButtonGroup.tsx

@@ -27,15 +27,17 @@ export type FloatingIconButtonGroupProps = Pick<
   iconButtons: {
     Icon: IconComponent;
     onClick?: (event: MouseEvent<any>) => void;
+    isActive?: boolean;
   }[];
 };
 
 export const FloatingIconButtonGroup = ({
   iconButtons,
   size,
+  className,
 }: FloatingIconButtonGroupProps) => (
-  <StyledFloatingIconButtonGroupContainer>
+  <StyledFloatingIconButtonGroupContainer className={className}>
-    {iconButtons.map(({ Icon, onClick }, index) => {
+    {iconButtons.map(({ Icon, onClick, isActive }, index) => {
       const position: FloatingIconButtonPosition =
         iconButtons.length === 1
           ? 'standalone'
@@ -54,6 +56,7 @@ export const FloatingIconButtonGroup = ({
           onClick={onClick}
           position={position}
           size={size}
+          isActive={isActive}
         />
       );
     })}

front/src/modules/ui/field/types/FieldDefinition.ts

@@ -11,4 +11,5 @@ export type FieldDefinition<T extends FieldMetadata> = {
   metadata: T;
   buttonIcon?: IconComponent;
   basePathToShowPage?: string;
+  infoTooltipContent?: string;
 };

front/src/modules/ui/menu-item/components/MenuItem.tsx

@@ -20,6 +20,7 @@ export type MenuItemProps = {
   accent?: MenuItemAccent;
   text: string;
   iconButtons?: MenuItemIconButton[];
+  isTooltipOpen?: boolean;
   className?: string;
   testId?: string;
   onClick?: () => void;
@@ -30,6 +31,7 @@ export const MenuItem = ({
   accent = 'default',
   text,
   iconButtons,
+  isTooltipOpen,
   className,
   testId,
   onClick,
@@ -42,6 +44,7 @@ export const MenuItem = ({
       onClick={onClick}
       className={className}
       accent={accent}
+      isMenuOpen={!!isTooltipOpen}
     >
       <StyledMenuItemLeftContent>
         <MenuItemLeftContent LeftIcon={LeftIcon ?? undefined} text={text} />

front/src/modules/ui/menu-item/components/MenuItemDraggable.tsx

@@ -11,6 +11,7 @@ export type MenuItemDraggableProps = {
   LeftIcon: IconComponent | undefined;
   accent?: MenuItemAccent;
   iconButtons?: MenuItemIconButton[];
+  isTooltipOpen?: boolean;
   onClick?: () => void;
   text: string;
   isDragDisabled?: boolean;
@@ -20,6 +21,7 @@ export const MenuItemDraggable = ({
   LeftIcon,
   accent = 'default',
   iconButtons,
+  isTooltipOpen,
   onClick,
   text,
   isDragDisabled = false,
@@ -32,17 +34,19 @@ export const MenuItemDraggable = ({
       onClick={onClick}
       accent={accent}
       className={className}
+      isMenuOpen={!!isTooltipOpen}
     >
       <MenuItemLeftContent
         LeftIcon={LeftIcon}
         text={text}
         showGrip={!isDragDisabled}
       />
-      <div className="hoverable-buttons">
+      {showIconButtons && (
-        {showIconButtons && (
+        <FloatingIconButtonGroup
-          <FloatingIconButtonGroup iconButtons={iconButtons} />
+          className="hoverable-buttons"
-        )}
+          iconButtons={iconButtons}
-      </div>
+        />
+      )}
     </StyledHoverableMenuItemBase>
   );
 };

front/src/modules/ui/menu-item/internals/components/StyledMenuItemBase.tsx

@@ -89,9 +89,11 @@ export const StyledMenuItemRightContent = styled.div`
   flex-direction: row;
 `;
 
-export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)`
+export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{
+  isMenuOpen: boolean;
+}>`
   & .hoverable-buttons {
-    opacity: 0;
+    opacity: ${({ isMenuOpen }) => (isMenuOpen ? 1 : 0)};
     pointer-events: none;
     position: fixed;
     right: ${({ theme }) => theme.spacing(2)};

front/src/modules/ui/view-bar/components/ViewFieldsVisibilityDropdownSection.tsx

@@ -1,3 +1,5 @@
+import { useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import {
   DropResult,
   OnDragEndResponder,
@@ -9,8 +11,12 @@ import { DraggableList } from '@/ui/draggable-list/components/DraggableList';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSubheader } from '@/ui/dropdown/components/StyledDropdownMenuSubheader';
 import { IconMinus, IconPlus } from '@/ui/icon';
+import { IconInfoCircle } from '@/ui/input/constants/icons';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 import { MenuItemDraggable } from '@/ui/menu-item/components/MenuItemDraggable';
+import { AppTooltip } from '@/ui/tooltip/AppTooltip';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { isDefined } from '~/utils/isDefined';
 
 import { ViewFieldForVisibility } from '../types/ViewFieldForVisibility';
 
@@ -33,8 +39,38 @@ export const ViewFieldsVisibilityDropdownSection = ({
     onDragEnd?.(result, provided);
   };
 
+  const [openToolTipIndex, setOpenToolTipIndex] = useState<number>();
+
+  const handleInfoButtonClick = (index: number) => {
+    if (index === openToolTipIndex) setOpenToolTipIndex(undefined);
+    else setOpenToolTipIndex(index);
+  };
+
   const getIconButtons = (index: number, field: ViewFieldForVisibility) => {
-    if (index !== 0) {
+    const isFirstColumn = isDraggable && index === 0;
+    if (isFirstColumn && field.infoTooltipContent) {
+      return [
+        {
+          Icon: IconInfoCircle,
+          onClick: () => handleInfoButtonClick(index),
+          isActive: openToolTipIndex === index,
+        },
+      ];
+    }
+    if (!isFirstColumn && field.infoTooltipContent) {
+      return [
+        {
+          Icon: IconInfoCircle,
+          onClick: () => handleInfoButtonClick(index),
+          isActive: openToolTipIndex === index,
+        },
+        {
+          Icon: field.isVisible ? IconMinus : IconPlus,
+          onClick: () => onVisibilityChange(field),
+        },
+      ];
+    }
+    if (!isFirstColumn && !field.infoTooltipContent) {
       return [
         {
           Icon: field.isVisible ? IconMinus : IconPlus,
@@ -44,11 +80,20 @@ export const ViewFieldsVisibilityDropdownSection = ({
     }
   };
 
+  const ref = useRef<HTMLDivElement>(null);
+
+  useListenClickOutside({
+    refs: [ref],
+    callback: () => {
+      setOpenToolTipIndex(undefined);
+    },
+  });
+
   return (
-    <>
+    <div ref={ref}>
       <StyledDropdownMenuSubheader>{title}</StyledDropdownMenuSubheader>
       <StyledDropdownMenuItemsContainer>
-        {isDraggable && (
+        {isDraggable ? (
           <DraggableList
             onDragEnd={handleOnDrag}
             draggableItems={
@@ -64,8 +109,10 @@ export const ViewFieldsVisibilityDropdownSection = ({
                         key={field.key}
                         LeftIcon={field.Icon}
                         iconButtons={getIconButtons(index, field)}
+                        isTooltipOpen={openToolTipIndex === index}
                         text={field.name}
                         isDragDisabled={index === 0}
+                        className={`${title}-draggable-item-tooltip-anchor-${index}`}
                       />
                     }
                   />
@@ -73,22 +120,31 @@ export const ViewFieldsVisibilityDropdownSection = ({
               </>
             }
           />
-        )}
+        ) : (
-        {!isDraggable &&
+          fields.map((field, index) => (
-          fields.map((field) => (
             <MenuItem
               key={field.key}
               LeftIcon={field.Icon}
-              iconButtons={[
+              iconButtons={getIconButtons(index, field)}
-                {
+              isTooltipOpen={openToolTipIndex === index}
-                  Icon: field.isVisible ? IconMinus : IconPlus,
-                  onClick: () => onVisibilityChange(field),
-                },
-              ]}
               text={field.name}
+              className={`${title}-fixed-item-tooltip-anchor-${index}`}
             />
-          ))}
+          ))
+        )}
       </StyledDropdownMenuItemsContainer>
-    </>
+      {isDefined(openToolTipIndex) &&
+        createPortal(
+          <AppTooltip
+            anchorSelect={`.${title}-${
+              isDraggable ? 'draggable' : 'fixed'
+            }-item-tooltip-anchor-${openToolTipIndex}`}
+            place="left"
+            content={fields[openToolTipIndex].infoTooltipContent}
+            isOpen={true}
+          />,
+          document.body,
+        )}
+    </div>
   );
 };

front/src/modules/ui/view-bar/types/ViewFieldForVisibility.ts

@@ -3,7 +3,7 @@ import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
 
 export type ViewFieldForVisibility = Pick<
   FieldDefinition<FieldMetadata>,
-  'key' | 'name' | 'Icon'
+  'key' | 'name' | 'Icon' | 'infoTooltipContent'
 > & {
   isVisible?: boolean;
   index: number;