From c11c4fc4d978cb9900d18557e82c0da5a065a277 Mon Sep 17 00:00:00 2001
From: efshaperveen <efshaperveen10@gmail.com>
Date: Tue, 14 Jan 2025 13:27:40 +0530
Subject: [PATCH] Added tooltips in the contact form

---
 index.html               |  9 +++++++++
 website/styles/style.css | 34 +++++++++++++++++++++++++++++++++-
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index dfe51c5..67cec40 100644
--- a/index.html
+++ b/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 example@gmail.com.</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>
diff --git a/website/styles/style.css b/website/styles/style.css
index a20f6c4..4a85665 100644
--- a/website/styles/style.css
+++ b/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;
 }