Kész hozzáadás form

frontend/peepal_react/src/WC_Komponens/Hozzadas/HozzaadForm.jsx

@@ -1,4 +1,17 @@
 export default function HozzaadForm() {
+    const ToolTip = ({children, text}) => {
+        return(
+            <div className="relative group">
+  {children}
+  <div className="absolute left-full transform -translate-x-1/2 bottom-full mb-2 hidden group-hover:block bg-gray-800 text-white text-xs rounded-md py-2 px-3 w-48 z-10 shadow-lg opacity-0 group-hover:opacity-100">
+    {text}
+  </div>
+</div>
+
+
+        )
+    }
+    
     return (
         <div className="flex justify-center items-center min-h-screen bg-gray-100">
             <form className="bg-white p-6 rounded-lg shadow-lg w-96 space-y-4">
@@ -53,8 +66,10 @@ export default function HozzaadForm() {
                     </div>
                 </fieldset>
 
-                <label className="block text-gray-700">Útvonalterv link:</label>
-                <button data-tooltip-target="tooltip-right" data-tooltip-placement="right" type="button" class="ms-3 mb-2 md:mb-0 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">❓</button>
+                <div className="flex items-center space-x-2">
+                    <label className="text-gray-700">Útvonalterv link:</label>
+                    <ToolTip children={"❔"} text={"Az útvonalterv linket a Google Maps-en éri el (Megosztás ➡ Link másolása)"} />
+                </div>
                 <input 
                     type="text" 
                     placeholder="Útvonal link"