Add tooltip to filenames

okfn · Aug 31, 2024 · e583562 · e583562
1 parent d01edfb
commit e583562
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 18 deletions.
diff --git a/client/components/Parts/Tooltips/FileMenu.tsx b/client/components/Parts/Tooltips/FileMenu.tsx
@@ -0,0 +1,17 @@
+import { styled } from '@mui/material/styles'
+import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip'
+
+export default styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} TransitionProps={{ timeout: 0 }} placement="right-start" />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: theme.palette.OKFNBlue.main,
+    color: theme.palette.common.black,
+    boxShadow: theme.shadows[1],
+    fontSize: 16,
+    maxWidth: 500
+  },
+  [`& .${tooltipClasses.arrow}`]: {
+    color: theme.palette.common.black,
+  },
+}))
diff --git a/client/components/Parts/Trees/File.tsx b/client/components/Parts/Trees/File.tsx
@@ -10,6 +10,7 @@ import * as types from '../../../types'
 import { useTheme } from '@mui/material/styles'
 import openFolderIcon from '../../../assets/open_folder_icon.svg'
 import closedFolderIcon from '../../../assets/closed_folder_icon.svg'
+import FileMenuTooltip from '../Tooltips/FileMenu'
 
 export interface FileTreeProps {
   files: types.IFile[]
@@ -135,24 +136,26 @@ function TreeItemIcon(props: { nodeId: string; item: types.IFileTreeItem }) {
   // const fontWeight = props.item.type === 'package' ? 'bold' : 'normal'
 
   return (
-    <Box
-      sx={{
-        py: 1,
-        display: 'flex',
-        alignItems: 'center',
-        overflow: 'hidden',
-        '& div': { mr: 1 },
-      }}
-    >
-      <div style={{
-        height: '8px',
-        width: '8px',
-        minWidth: '8px',
-        minHeight: '8px',
-        backgroundColor: color,
-        borderRadius: '50%',}}>{" "}</div>
-      <span style={{ whiteSpace: 'nowrap', fontWeight }}>{props.item.label}</span>
-    </Box>
+    <FileMenuTooltip title={props.item.label}>
+      <Box
+        sx={{
+          py: 1,
+          display: 'flex',
+          alignItems: 'center',
+          overflow: 'hidden',
+          '& div': { mr: 1 },
+        }}
+      >
+        <div style={{
+          height: '8px',
+          width: '8px',
+          minWidth: '8px',
+          minHeight: '8px',
+          backgroundColor: color,
+          borderRadius: '50%',}}>{" "}</div>
+        <span style={{ whiteSpace: 'nowrap', fontWeight }}>{props.item.label}</span>
+      </Box>
+    </FileMenuTooltip>
   )
 }