From 8808ed59c24cce8759142eca9aa7d12e1e13ef9c Mon Sep 17 00:00:00 2001 From: SHIVEN YADAV S <155547804+shivenyadavs@users.noreply.github.com> Date: Fri, 1 Nov 2024 10:02:47 +0530 Subject: [PATCH] Update contact.html --- contact.html | 74 ++++++++++++++++++++++++++++++++-------------------- 1 file changed, 46 insertions(+), 28 deletions(-) diff --git a/contact.html b/contact.html index 2394c95e..ee5fc8ed 100644 --- 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 */ + }
@@ -202,6 +208,10 @@