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) { {steps.map((step) => { return ( - - {step.label} - + + + {step.label} + + ); })}