From 927fd484494fba48418cfb39bb7b8dc2d1fcbd49 Mon Sep 17 00:00:00 2001
From: Praneeth Palugula <137754636+Praneeth-2602@users.noreply.github.com>
Date: Sat, 10 Aug 2024 19:21:21 +0530
Subject: [PATCH] Added Help Tooltip (#1354)
---
Components/Tooltips/Help-Tooltip/index.html | 25 ++++++
Components/Tooltips/Help-Tooltip/style.css | 96 +++++++++++++++++++++
assets/html_files/tooltips.html | 13 +++
3 files changed, 134 insertions(+)
create mode 100644 Components/Tooltips/Help-Tooltip/index.html
create mode 100644 Components/Tooltips/Help-Tooltip/style.css
diff --git a/Components/Tooltips/Help-Tooltip/index.html b/Components/Tooltips/Help-Tooltip/index.html
new file mode 100644
index 00000000..2484c77f
--- /dev/null
+++ b/Components/Tooltips/Help-Tooltip/index.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+ Help Tooltip
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Components/Tooltips/Help-Tooltip/style.css b/Components/Tooltips/Help-Tooltip/style.css
new file mode 100644
index 00000000..64af5705
--- /dev/null
+++ b/Components/Tooltips/Help-Tooltip/style.css
@@ -0,0 +1,96 @@
+body{
+ background: #212121;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+}
+
+.Social-Btn {
+ width: 4.5em;
+ height: 2.5em;
+ align-items: baseline;
+ justify-content: center;
+ border: none;
+
+ /* overflow: hidden; */
+ border-radius: 7px;
+ cursor: pointer;
+ transition: all 0.3s;
+ fill: white !important;
+ position: relative;
+}
+
+.svgContainer {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: transparent;
+ backdrop-filter: blur(0px);
+ letter-spacing: 0.8px;
+ border-radius: 10px;
+ transition: all 0.3s;
+ border: 1px solid rgba(156, 156, 156, 0.466);
+ color: white;
+ background: rgba(83, 69, 69, 0.562);
+}
+
+.svgContainer>svg {
+ width: 1.5rem;
+}
+
+.BG {
+ position: absolute;
+ top: 0;
+ left: 0;
+ content: "";
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+ border-radius: 10px;
+ pointer-events: none;
+ transition: all 2s;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-weight: 600;
+ color: transparent;
+ filter: blur(4px);
+ z-index: 4;
+}
+
+.BG::before {
+ position: absolute;
+ content: "";
+ height: 0.6em;
+ width: 0.6em;
+ bottom: -0.2em;
+ left: 50%;
+ transform: translate(-50%) rotate(45deg);
+ background: white;
+ opacity: -1;
+ z-index: -10;
+ transition: 5s all;
+}
+
+.Social-Btn:hover .BG::before {
+ opacity: 1;
+}
+
+.Social-Btn:hover .BG {
+ transform: translateY(-130%);
+ transform-origin: bottom;
+ background: white;
+ color: black;
+ filter: blur(0px);
+}
+
+.Social-Btn:hover .svgContainer {
+ z-index: 20;
+ background-color: rgba(156, 156, 156, 0.466);
+ filter: blur(0px);
+ fill: black;
+}
\ No newline at end of file
diff --git a/assets/html_files/tooltips.html b/assets/html_files/tooltips.html
index 86bc93cf..1cf54caa 100644
--- a/assets/html_files/tooltips.html
+++ b/assets/html_files/tooltips.html
@@ -127,6 +127,19 @@ Gradient Tooltip
+
+
+ 
+
+