From b3aebebe88a548c1c2cb668b350c09952de48189 Mon Sep 17 00:00:00 2001
From: Matthew Northcott <matthewnorthcott@catalyst.net.nz>
Date: Fri, 5 Aug 2022 13:37:22 +1200
Subject: [PATCH] Add tooltips to Stepper component

---
 frontend/src/components/Stepper.js | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Stepper.js b/frontend/src/components/Stepper.js
index a8594bd..b914f72 100644
--- a/frontend/src/components/Stepper.js
+++ b/frontend/src/components/Stepper.js
@@ -4,6 +4,7 @@ import Stepper from '@mui/material/Stepper';
 import Step from '@mui/material/Step';
 import StepLabel from '@mui/material/StepLabel';
 import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
 
 import LocationStep from './steps/location/LocationStep'
 import SoilStep from './steps/soilvariant/SoilStep'
@@ -13,12 +14,12 @@ import SummaryStep from './steps/summary/SummaryStep';
 import ResultsStep from './steps/results/ResultsStep'
 
 const steps = [
-  { 'label': 'Select location', 'component': LocationStep },
-  { 'label': 'Choose soil', 'component': SoilStep },
-  { 'label': 'Choose habitat', 'component': HabitatStep },
-  { 'label': 'Select zone', 'component': ZoneStep },
-  { 'label': 'Summary', 'component': SummaryStep },
-  { 'label': 'Results', 'component': ResultsStep }
+  { 'label': 'Select location', 'component': LocationStep, 'tooltip': "Click on a location on the map" },
+  { 'label': 'Choose soil', 'component': SoilStep, 'tooltip': "Describe the moisture content of your soil" },
+  { 'label': 'Choose habitat', 'component': HabitatStep, 'tooltip': "Specify type of landscape to be planted" },
+  { 'label': 'Select zone', 'component': ZoneStep, 'tooltip': "Specify geographical detail" },
+  { 'label': 'Summary', 'component': SummaryStep, 'tooltip': "Check your inputs" },
+  { 'label': 'Results', 'component': ResultsStep, 'tooltip': "List of plant species and user guide" }
 ];
 
 export default function StepperWizard(props) {
@@ -58,9 +59,11 @@ export default function StepperWizard(props) {
       <Stepper activeStep={activeStep} sx={{ paddingRight: '3vw', paddingLeft: '3vw', marginBottom: '2vw' }}>
         {steps.map((step) => {
           return (
-            <Step key={step.label}>
-              <StepLabel>{step.label}</StepLabel>
-            </Step>
+            <Tooltip title={step.tooltip}>
+              <Step key={step.label}>
+                <StepLabel>{step.label}</StepLabel>
+              </Step>
+            </Tooltip>
           );
         })}
       </Stepper>