Merge pull request #67 from MetaCell/feature/ESCKAN-77

ESCKAN-77 Add tooltip for the filters in the left-side widget

src/components/common/CustomFilterDropdown.tsx

@@ -4,7 +4,6 @@ import {
   ClickAwayListener,
   InputAdornment,
   Popper,
-  Tooltip,
 } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 import {
@@ -22,6 +21,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import { vars } from '../../theme/variables';
 import { Option } from './Types.ts';
+import Tooltip from './Tooltip.tsx';
 
 const {
   gray100,
@@ -251,12 +251,14 @@ export default function CustomEntitiesDropdown({
             ref={dropdownButtonRef}
           >
             {selectedOptions.length === 0 ? (
-              <Typography sx={styles.placeholder}>{placeholder}</Typography>
+              <Tooltip body={placeholder} arrow placement="top">
+                <Typography sx={styles.placeholder}>{placeholder}</Typography>
+              </Tooltip>
             ) : (
               <Box gap={0} display="flex" flexWrap="wrap" alignItems="center">
                 {updatedSelectedOptions?.map((item: Option) => {
                   return (
-                    <Tooltip title={item?.label} placement="top" arrow>
+                    <Tooltip body={item?.label} placement="top" arrow>
                       <Chip
                         key={item?.id}
                         sx={styles.chip}

src/components/common/Tooltip.tsx

@@ -0,0 +1,64 @@
+import { FC } from 'react';
+import { vars } from '../../theme/variables';
+import { Box, Tooltip as MaterialTooltip, Typography } from '@mui/material';
+import { type TooltipProps as MaterialTooltipProps } from '@mui/material';
+const { gray25, gray300 } = vars;
+
+interface TooltipProps extends Omit<MaterialTooltipProps, 'title'> {
+  heading?: string;
+  body: string | React.ReactNode;
+  minWidth?: number;
+}
+
+const commonHeadingStyles = {
+  fontSize: '0.75rem',
+  fontWeight: 500,
+  lineHeight: '1.125rem',
+  color: gray300,
+};
+
+const commonTextStyles = {
+  fontSize: '0.75rem',
+  fontWeight: 600,
+  lineHeight: '1.125rem',
+  color: gray25,
+};
+
+const Tooltip: FC<TooltipProps> = ({
+  heading,
+  body,
+  minWidth,
+  children,
+  ...tooltipProps
+}) => {
+  const isContentString = typeof body === 'string';
+
+  return (
+    <MaterialTooltip
+      {...tooltipProps}
+      title={
+        <Box minWidth={minWidth}>
+          <Typography
+            sx={{
+              ...commonHeadingStyles,
+              marginBottom: '0.125rem',
+            }}
+          >
+            {heading}
+          </Typography>
+          {isContentString ? (
+            <Typography sx={{ ...commonTextStyles, marginTop: '0.125rem' }}>
+              {body}
+            </Typography>
+          ) : (
+            <>{body}</>
+          )}
+        </Box>
+      }
+    >
+      {children}
+    </MaterialTooltip>
+  );
+};
+
+export default Tooltip;