diff --git a/frontend/src/assets/styles/step.scss b/frontend/src/assets/styles/step.scss
index 2fef5ea..8051d8e 100644
--- a/frontend/src/assets/styles/step.scss
+++ b/frontend/src/assets/styles/step.scss
@@ -52,3 +52,18 @@
     fill-opacity: 0.5 !important;
     cursor: pointer;
 }
+
+#svg-tooltip {
+    background-color: rgba(97, 97, 97, 0.92);
+    border-radius: 4px;
+    color: #fff;
+    font-family: Poppins,sans-serif;
+    padding: 4px 8px;
+    font-size: 0.6875rem;
+    max-width: 300px;
+    margin: 0;
+    word-wrap: break-word;
+    font-weight: 500;
+    position: relative;
+  }
+  
\ No newline at end of file
diff --git a/frontend/src/components/steps/zone/ZoneSelector.js b/frontend/src/components/steps/zone/ZoneSelector.js
index 0d3ec74..aae3e2d 100644
--- a/frontend/src/components/steps/zone/ZoneSelector.js
+++ b/frontend/src/components/steps/zone/ZoneSelector.js
@@ -30,13 +30,13 @@ export default function ZoneSelector(props) {
                     setHabitatImageObject(imageData)
                 }
             })
-        }    
+        }
 
         const setInitialZone = () => {
             if (props.filters.zone) {
                 const zone = props.filters.zone
                 const zoneSegment = document.querySelectorAll(`.zone-selector-svg svg path[inkscapelabel="${zone.related_svg_segment}"]`)[0];
-                
+
                 // If the previously selected zone segment is located in the diagram then highlight it
                 if (zoneSegment) {
                     setZoneSegment(zoneSegment)
@@ -67,7 +67,7 @@ export default function ZoneSelector(props) {
         // Retrieves the habitat image from the api if it's not loaded already
         Object.keys(segmentMapping).length === 0 && getZones()
 
-    }, [ habitatImageObject, segmentMapping, props, props.filters.zone]);
+    }, [habitatImageObject, segmentMapping, props, props.filters.zone]);
 
     const selectZone = (element) => {
         if (['path', 'rect'].includes(element.tagName) && element.attributes.inkscapelabel && element.attributes.inkscapelabel.nodeValue) {
@@ -85,11 +85,33 @@ export default function ZoneSelector(props) {
         }
     }
 
+    const showTooltip = (evt) => {
+        const element = evt.target;
+        if (['path', 'rect'].includes(element.tagName) && element.attributes.inkscapelabel && element.attributes.inkscapelabel.nodeValue) {
+            const zone = segmentMapping[element.attributes.inkscapelabel.nodeValue]
+
+            if (zone) {
+                let tooltip = document.getElementById("svg-tooltip");
+                tooltip.innerHTML = zone.tooltip_display_text;
+                tooltip.style.display = "block";
+                tooltip.style.left = evt.pageX + 10 + 'px';
+                tooltip.style.top = evt.pageY + 10 + 'px';
+                tooltip.style.opacity = 1;
+            }
+        }
+    }
+
+    const hideTooltip = () => {
+        var tooltip = document.getElementById("svg-tooltip");
+        tooltip.style.display = "none";
+    }
+
     return Object.keys(habitatImageObject).length > 0 ? (
         <div style={{ width: '100%' }}>
             <p>{habitatImageObject.name}</p>
             <div className="zone-selector-svg">
-                <HabitatSVG onClick={(event) => selectZone(event.target)} name={habitatImageObject.image_filename} style={{ "height": 'auto', "width": "100%" }} />
+                <div id="svg-tooltip" className="MuiTooltip-tooltip MuiTooltip-tooltipArrow MuiTooltip-tooltipPlacementBottom" display="none" style={{ "position": 'absolute', "display": "none" }} ></div>
+                <HabitatSVG onClick={(event) => selectZone(event.target)} onMouseMove={(event) => showTooltip(event)} onMouseOut={() => hideTooltip()} name={habitatImageObject.image_filename} style={{ "height": 'auto', "width": "100%" }} />
             </div>
         </div>) : <div></div>
 }