Added tooltips to EditModeToggle icons and adjusted tooltip positioning using Material-UI

components/DataSheet.js

@@ -90,6 +90,7 @@ function DataSheet() {
               </option>
             ))}
           </select>
+          <EditModeToggle />
           <img src="/img/expand-icon.svg" alt="Expand" className="h-6 w-6 ml-2 cursor-pointer" onClick={handleIconClick} />
         </div>
 
@@ -116,8 +117,6 @@ function DataSheet() {
             POIs
           </label>
         </div>
-
-        <EditModeToggle />
       </div>
     </div>
   );

components/EditModeToggle.js

@@ -1,4 +1,7 @@
 import React, { useState, useEffect } from "react";
+import DesignServicesIcon from "@mui/icons-material/DesignServices";
+import EditOffIcon from "@mui/icons-material/EditOff";
+import Tooltip from "@mui/material/Tooltip"; // Importiere Tooltip von Material-UI
 
 function EditModeToggle() {
   const [editMode, setEditMode] = useState(() => localStorage.getItem("editMode") === "true");
@@ -17,9 +20,17 @@ function EditModeToggle() {
   }, []);
 
   return (
-    <button onClick={toggleEditMode} className="bg-gray-200 p-2 rounded">
-      {editMode ? "Bearbeitungsmodus deaktivieren" : "Bearbeitungsmodus aktivieren"}
-    </button>
+    <div onClick={toggleEditMode} style={{ cursor: "pointer" }}>
+      {editMode ? (
+        <Tooltip title="Bearbeitungsmodus deaktivieren" placement="top">
+          <EditOffIcon />
+        </Tooltip>
+      ) : (
+        <Tooltip title="Bearbeitungsmodus aktivieren" placement="top">
+          <DesignServicesIcon />
+        </Tooltip>
+      )}
+    </div>
   );
 }