Merge pull request #380 from efshaperveen/main

Added tooltips in the contact form

Author: multiverseweb

index.html

@@ -248,10 +248,19 @@
         <form name="Dataverse Reviews" method="POST" data-netlify="true" id="feedback-form"
             onsubmit="return validateForm()">
             <p style="color:white">Let Me Know Your Thoughts!</p>
+            <div class="tooltip">
             <input type="text" name="Name" placeholder="Your Name" required>
+            <span class="tooltiptext">Please enter your full name here.</span> 
+            </div>
+            <div class="tooltip">
             <input type="email" name="Email" placeholder="Your Email ID" required>
+            <span class="tooltiptext">Please enter a valid email like [email protected].</span>
+          </div>
+          <div class="tooltip">    
             <textarea name="Message" placeholder="Your thoughts on Dataverse" rows="4" required
                 oninput="checkFeedbackLength(this)"></textarea>
+            <span class="tooltiptext">Feel free to describe your thoughts in detail.</span>
+        </div>
             <p id="feedbackError"
                 style="color:#fd4346; opacity: 0%; font-size: 15px; white-space: normal; transition: opacity 0.4s ease ">
                 Feedback must be at least 10 characters long.</p>

website/styles/style.css

@@ -1019,7 +1019,7 @@ form {
 input {
     background-color: #76767639;
     width: 85%;
-    height: 30px;
+    height: 35px;
     margin-top: 20px;
     border-radius: 5px;
     padding: 5px 10px;
@@ -1047,6 +1047,38 @@ input {
     box-shadow: 0px 0px 10px cyan;
 }
 
+.tooltip {
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
+  
+   /* Tooltip text  */
+  .tooltip .tooltiptext {
+    visibility: hidden;
+    width: 150px;
+    background-color: rgba(255, 255, 255, 0.873);
+    color: black;
+    text-align: center;
+    border-radius: 5px;
+    padding: 5px;
+    position: absolute;
+    left: 70%;
+    margin-left: -100px; 
+    top: 48%;
+    transform: translateY(-50%);
+    opacity: 0;
+    transition: opacity 0.3s;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    font-size: 11px;
+  }
+    
+  /* Show the tooltip on hover */
+  .tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+  }
+
 .contact {
     width: 40vw;
 }