feat: add tooltip component and show tooltip on action bar item

platform/firecamp-platform/src/components/containers/SidebarContainer.tsx

@@ -38,8 +38,8 @@ const compositeBarItems = [
         tabIndex={-1}
       />
     ),
-    // text: `Collections (${scPrefix} ⇧ C)`,
     item: EActivityBarItems.Explorer,
+    tooltip: `Collections (${scPrefix} ⇧ C)`,
   },
   {
     id: EActivityBarItems.Environment,
@@ -52,8 +52,8 @@ const compositeBarItems = [
         tabIndex={-1}
       />
     ),
-    // text: `Environment (${scPrefix} ⇧ E)`,
     item: EActivityBarItems.Environment,
+    tooltip: `Environment (${scPrefix} ⇧ E)`,
   },
   {
     id: EActivityBarItems.History,
@@ -66,8 +66,8 @@ const compositeBarItems = [
         tabIndex={-1}
       />
     ),
-    // text: `History (${scPrefix} ⇧ H)`,
     item: EActivityBarItems.History,
+    tooltip: `History (${scPrefix} ⇧ H)`,
   },
 ];
 
@@ -106,8 +106,8 @@ const actionBarItems = [
         tabIndex={-1}
       />
     ),
-    text: `User (${scPrefix} ⇧ U)`,
     item: EActivityBarItems.User,
+    tooltip: `User (${scPrefix} ⇧ U)`,
   },
   {
     id: EActivityBarItems.Settings,
@@ -118,8 +118,8 @@ const actionBarItems = [
         tabIndex={-1}
       />
     ),
-    text: `Settings (${scPrefix} ⇧ /)`,
     item: EActivityBarItems.Settings,
+    tooltip: `Settings (${scPrefix} ⇧ /)`,
   },
 ];
 

platform/firecamp-ui/src/components/activity-bar/ActionItem.tsx

@@ -1,7 +1,7 @@
-import { FC } from 'react';
+import { FC, forwardRef } from 'react';
 import cx from 'classnames';
 import { UserCircle2 } from 'lucide-react';
-// import ReactTooltip from 'react-tooltip';
+import Tooltip from '../tooltip/Tooltip';
 
 const ActionItem: FC<IActionItem> = ({
   id = '',
@@ -10,48 +10,70 @@ const ActionItem: FC<IActionItem> = ({
   active = false,
   onClick = () => {},
   icon = '',
-  tooltip = '',
+  tooltip,
 }) => {
+  const Item = forwardRef<HTMLDivElement, IActionItem>(
+    (
+      {
+        active = false,
+        className = '',
+        style = {},
+        onClick = () => {},
+        icon = '',
+      },
+      ref
+    ) => (
+      <div
+        tabIndex={1}
+        className={cx(
+          'h-12 flex justify-center items-center cursor-pointer relative text-2xl action-item',
+          {
+            'text-activityBar-foreground-inactive hover:text-activityBar-foreground':
+              active == false,
+          },
+          {
+            'before:block before:z-0 before:content-[""] before:absolute before:top-0 before:bottom-0 before:left-0 before:w-0.5 before:bg-activityBar-border-active text-activityBar-foreground bg-activityBar-background-active':
+              active == true,
+          },
+          className
+        )}
+        style={style}
+        onClick={onClick}
+        data-for={id}
+        ref={ref}
+      >
+        {!!icon ? icon : <UserCircle2 tabIndex={-1} data-for={id} />}
+      </div>
+    )
+  );
 
-  return (
-    <div
-      tabIndex={1}
-      className={cx(
-        'h-12 flex justify-center items-center cursor-pointer relative text-2xl action-item',
-        {
-          'text-activityBar-foreground-inactive hover:text-activityBar-foreground':
-            active == false,
-        },
-        {
-          'before:block before:z-0 before:content-[""] before:absolute before:top-0 before:bottom-0 before:left-0 before:w-0.5 before:bg-activityBar-border-active text-activityBar-foreground bg-activityBar-background-active':
-            active == true,
-        },
-        className
-      )}
-      style={style}
-      onClick={onClick}
-      data-tip={tooltip}
-      data-for={id}
+  return tooltip ? (
+    <Tooltip
+      arrowOffset={5}
+      arrowSize={6}
+      arrowPosition="side"
+      label={tooltip}
+      position="right"
+      withArrow={true}
     >
-      {!!icon ? (
-        icon
-      ) : (
-        <UserCircle2
-          /*title="Account"
-              size={24}*/
-          tabIndex={-1}
-          data-tip={tooltip}
-          data-for={id}
-        />
-      )}
-       {/* @ts-ignore
-       <ReactTooltip
-        data-delay-hide='10000'
+      <Item
+        active={active}
+        className={className}
         id={id}
-        className="bg-app-foreground-inactive"
-        place="right"
-        effect="float" /> */}
-    </div>
+        onClick={onClick}
+        style={style}
+        icon={icon}
+      />
+    </Tooltip>
+  ) : (
+    <Item
+      active={active}
+      className={className}
+      id={id}
+      icon={icon}
+      onClick={onClick}
+      style={style}
+    />
   );
 };
 
@@ -89,7 +111,7 @@ export interface IActionItem {
   /**
    * Add a tooltip
    */
-  tooltip: string;
+  tooltip?: string;
 
   onClick: () => void;
 }

platform/firecamp-ui/src/components/activity-bar/ActionItems.tsx

@@ -4,52 +4,48 @@ import ActionItem from './ActionItem';
 const ActionItems: FC<IActionItems> = ({
   items = [],
   activeItem = '',
-  onClickItem = () => { }
+  onClickItem = () => {},
 }) => {
   return (
     <Fragment>
-      {items.map((item: any, i: number) =>
-      (
+      {items.map((item: any, i: number) => (
         <ActionItem
           id={item.id}
           icon={item.icon}
-          tooltip={item.text}
+          tooltip={item.tooltip}
           key={i}
           active={activeItem === item.id}
           onClick={() => {
-            onClickItem(item)
+            onClickItem(item);
           }}
         />
-      )
-      )}
+      ))}
     </Fragment>
   );
 };
 
-export default ActionItems
-
+export default ActionItems;
 
 ActionItems.defaultProps = {
   id: '',
   className: '',
-  items: []
+  items: [],
 };
 
 export interface IActionItems {
+  activeItem?: string;
 
-  activeItem?: string,
-
-  onClickItem: (action: any) => void,
+  onClickItem: (action: any) => void;
   /**
    * Is this the principal call to action on the page?
    */
-  id?: string,
+  id?: string;
   /**
    * Add class name to show custom styling
    */
-  className?: string,
+  className?: string;
   /**
    * to show list of action items
    */
-  items?: any[]
-}
+  items?: any[];
+}

platform/firecamp-ui/src/components/tooltip/Tooltip.tsx

@@ -0,0 +1,36 @@
+import { FC } from 'react';
+
+import { MantineColor, Tooltip as MantineTooltip } from '@mantine/core';
+import { ArrowPosition, FloatingPosition } from '@mantine/core/lib/Floating';
+
+interface ITooltip {
+  arrowOffset?: number;
+  arrowPosition?: ArrowPosition;
+  arrowRadius?: number;
+  arrowSize?: number;
+  children: React.ReactNode;
+  closeDelay?: number;
+  color?: MantineColor;
+  disabled?: boolean;
+  events?: {
+    hover: boolean;
+    focus: boolean;
+    touch: boolean;
+  };
+  label: React.ReactNode;
+  multiline?: boolean;
+  offset?: number;
+  openDelay?: number;
+  position?: FloatingPosition;
+  withArrow?: boolean;
+}
+
+const Tooltip: FC<ITooltip> = ({ label, children, ...props }) => {
+  return (
+    <MantineTooltip label={label} {...props}>
+      {children}
+    </MantineTooltip>
+  );
+};
+
+export default Tooltip;