Add forest info tooltip

frontend/src/assets/data/staticText.json

@@ -29,8 +29,8 @@
             "description": "You have specified the following inputs – if these are correct go to the next step, otherwise go back and refine your input on the previous pages."
         },
         "results": {
-            "title": "Your Results",
-            "description": "Please review the plant species list – it can be saved as a CSV file or appended to a planting plan guidebook. Additional information on each species can be obtained by entering the plant species name into the search box at  https://inaturalist.nz or in the “search flora” box at https://www.nzpcn.org.nz/. Click below to create a planting plan guidebook specific to your project site.."
+            "title": "Plant List Results",
+            "forestDiagramDescription": "Forest Position Information Diagram"
         }
     }
 }

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>