Add frontend support for zone tooltips

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;
+  }
+  

frontend/src/components/steps/zone/ZoneSelector.js

@@ -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>
 }