From f3abddc98c42ffb8d85016cbad26caeee2fe5ff2 Mon Sep 17 00:00:00 2001
From: Andrew <andreasohaodha@proton.me>
Date: Sun, 6 Apr 2025 02:11:38 +0100
Subject: [PATCH] [frontend]: Add mouseover tooltip to markers

---
 frontend/src/App.jsx                     | 1 +
 frontend/src/components/MapComponent.jsx | 7 +++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index ce69716..0defcb6 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -397,6 +397,7 @@ function App() {
                             popup: popupContent,
                             icon: icon,
                             markerText: markerText.toLowerCase().replace(/[^a-zA-Z0-9]/g, ''),
+                            objectTitle: objectTitle,
                             display: true
                         });
                     }
diff --git a/frontend/src/components/MapComponent.jsx b/frontend/src/components/MapComponent.jsx
index 9d9fb16..4043f92 100644
--- a/frontend/src/components/MapComponent.jsx
+++ b/frontend/src/components/MapComponent.jsx
@@ -1,5 +1,5 @@
 import { React, useState, useEffect } from "react";
-import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+import { MapContainer, TileLayer, Marker, Popup, Tooltip } from "react-leaflet";
 import MarkerClusterGroup from "react-leaflet-markercluster";
 import L, { Icon } from "leaflet";
 import "leaflet/dist/leaflet.css";
@@ -119,8 +119,11 @@ const MapComponent = ({ markers, clusteringEnabled }) => {
             )}
             {clusteringEnabled ? (
                 <MarkerClusterGroup>
-                    {markers.map(({ coords, popup, icon }, index) => (
+                    {markers.map(({ coords, popup, icon, objectTitle}, index) => (
                         <Marker key={index} position={coords} icon={icons.get(icon)}>
+                            <Tooltip>
+                                {objectTitle}
+                            </Tooltip>
                             <Popup>{popup}</Popup>
                         </Marker>
                     ))}