Add forest info tooltip

frontend/src/components/steps/results/PlantList.js

@@ -16,6 +16,10 @@ import FirstPageIcon from '@mui/icons-material/FirstPage';
 import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
 import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
 import LastPageIcon from '@mui/icons-material/LastPage';
+import { styled } from '@mui/material/styles';
+import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
+import staticText from '../../../assets/data/staticText.json'
+import forestGraphic from '../../../assets/img/habitats/1a_Forest_Section.png';
 
 function TablePaginationActions(props) {
   const theme = useTheme();
@@ -95,13 +99,30 @@ export default function PlantResultsTable(props) {
     setPage(0);
   };
 
+  const CustomWidthTooltip = styled(({ className, ...props }) => (
+    <Tooltip {...props} classes={{ popper: className }} />
+  ))({
+    [`& .${tooltipClasses.tooltip}`]: {
+      maxWidth: 700,
+    },
+  });
+
+  const forestDiagramInformation = (
+    <div style={{ "width": "100%" }}>
+      <p>{staticText.steps.results.forestDiagramDescription}</p>
+      <img src={forestGraphic} style={{ "width": "100%" }} />
+    </div>
+  )
+
   return (
     <TableContainer component={Paper}>
       <Table size="small" stickyHeader aria-label="Plant table">
       <TableHead>
           <TableRow>
             <TableCell>Names</TableCell>
-            <TableCell align="right">Growth Form / Max Height (m) / Spacing (m) / Forest Position</TableCell>
+            <CustomWidthTooltip arrow title={forestDiagramInformation} >
+              <TableCell align="right">Growth Form / Max Height (m) / Spacing (m) / Forest Position</TableCell>
+            </CustomWidthTooltip>
             <TableCell align="right">Moisture Preferences</TableCell>
             <TableCell align="right">Tolerances (Water / Drought / Frost / Salinity)</TableCell>
             <TableCell align="right">Ecosystem Services</TableCell>