Update contact.html

PriyaGhosal · Nov 1, 2024 · 8808ed5 · 8808ed5
1 parent 38fa3ed
commit 8808ed5
Showing 1 changed file with 46 additions and 28 deletions.
diff --git a/contact.html b/contact.html
@@ -143,29 +143,35 @@
 }  */
 
 .tooltip {
-    visibility: hidden;
-    background-color:  black;
-    color: #fff;
-    width: 200px;
-    text-align: center;
-    padding: 3px;
-    border-radius: 5px;
-    position: absolute;
-    z-index: 1;
-    /* bottom: 30%; Position above the input field */
-    top: 41%;
-    left: 60%;
-    transform: translateX(-50%);
-    opacity: 0;
-    transition: opacity 0.3s;
-    font-size: 12px;
-}
-
-.form-group:hover .tooltip {
-    visibility: visible;
-    opacity: 1;
-}
+        visibility: hidden;
+        background-color: black;
+        color: #fff;
+        width: 200px;
+        text-align: center;
+        padding: 5px;
+        border-radius: 5px;
+        position: absolute;
+        top: -25px; /* Adjusts tooltip above input */
+        left: 0; /* Aligns tooltip to the input field */
+        transform: translateY(-100%); /* Ensures smooth positioning */
+        opacity: 0;
+        transition: opacity 0.3s;
+    }
 
+    .form-group:hover .tooltip {
+        visibility: visible;
+        opacity: 1;
+    }
+    .form-group {
+        position: relative; /* Ensure .tooltip positions relative to this */
+        margin-bottom: 20px;
+        color: #fff; 
+    }
+
+    .form-group:hover .tooltip {
+        visibility: visible; /* Show on hover */
+        opacity: 1; /* Fade in */
+    }
 
 </style>
 <body>
@@ -202,6 +208,10 @@ <h1 id="logo"><a href="#home" style="margin-left: 18px; margin-top: 5px;">BuddyT
             </button>
           </nav>
         </header>
+
+
+        <div id="google_translate_element" style="margin: 20px;"></div>
+
 
         <section id="contactus">
             <div class="card pb-5 pt-1">
@@ -315,14 +325,22 @@ <h3>Follow Us</h3>
   </div>
 </footer>
 
-<!-- Scripts -->
 <script>
+
   window.gtranslateSettings = {
-    "default_language": "en",
-    "detect_browser_language": true,
-    "wrapper_selector": ".gtranslate_wrapper"
-  };
-</script>
+    "default_language":"en",
+    "detect_browser_language":true,
+    "wrapper_selector":".gtranslate_wrapper"
+  }
+
+  </script>
+
+  <script
+    src="https://cdn.gtranslate.net/widgets/latest/float.js"
+    defer
+  ></script>
+<!-- Load Google Translate Script -->
+<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
 
 <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
 <script src="./contact.js"></script>