From de8482178479b42480f01ce442f622f3b9c2b929 Mon Sep 17 00:00:00 2001 From: Harshil Gupta Date: Thu, 1 Aug 2024 22:17:42 +0530 Subject: [PATCH 01/10] Added Gradient Tooltip --- .../Tooltips/Gradient-Tooltip/index.html | 31 + .../Tooltips/Gradient-Tooltip/style.css | 112 ++++ assets/html_files/tooltips.html | 564 +++++++++++++----- 3 files changed, 548 insertions(+), 159 deletions(-) create mode 100644 Components/Tooltips/Gradient-Tooltip/index.html create mode 100644 Components/Tooltips/Gradient-Tooltip/style.css diff --git a/Components/Tooltips/Gradient-Tooltip/index.html b/Components/Tooltips/Gradient-Tooltip/index.html new file mode 100644 index 00000000..843b2e68 --- /dev/null +++ b/Components/Tooltips/Gradient-Tooltip/index.html @@ -0,0 +1,31 @@ + + + + + + Gradient Tooltip + + + +
+ Discover + +
+
+ + + +
+
+ +
+ + diff --git a/Components/Tooltips/Gradient-Tooltip/style.css b/Components/Tooltips/Gradient-Tooltip/style.css new file mode 100644 index 00000000..6721f8e6 --- /dev/null +++ b/Components/Tooltips/Gradient-Tooltip/style.css @@ -0,0 +1,112 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #f5f5f5; + margin: 0; + font-family: "Poppins", sans-serif; +} + +.tooltip-container { + position: relative; + background-color: #ff3cac; + background-image: linear-gradient( + 225deg, + #ff3cac 0%, + #784ba0 50%, + #2b86c5 100% + ); + cursor: pointer; + transition: all 0.2s; + font-size: 17px; + + width: 50px; + height: 50px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + fill: #fff; + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); + border: 1px solid rgba(255, 255, 255, 0.18); +} +.tooltip-container .borde-back { + width: 60px; + height: 60px; + background-color: #e8e8e8; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + box-shadow: none; +} + +.tooltip-container .icon { + width: 50px; + height: 50px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + z-index: 10; + background-color: #ff3cac; + background-image: linear-gradient( + 225deg, + #ff3cac 0%, + #784ba0 50%, + #2b86c5 100% + ); + cursor: pointer; +} + +.tooltip { + position: absolute; + top: -2; + left: -45px; + transform: translateX(-32%); + width: 160px; + height: 52px; + opacity: 0; + pointer-events: none; + transition: all 0.6s; + border-radius: 50px; + background-color: #ff3cac; + background-image: linear-gradient( + 225deg, + #ff3cac 0%, + #784ba0 50%, + #2b86c5 100% + ); + display: flex; + align-items: center; + justify-content: right; + padding-right: 16px; + color: #fff; + font-size: 18px; + font-family: sans-serif; + font-weight: 800px; +} + +.tooltip::before { + position: absolute; + content: ""; + height: 0.6em; + width: 0.6em; + right: -0.2em; + top: 50%; + transform: translateY(-50%) rotate(45deg); + background: var(--background); +} + +.tooltip-container:hover .tooltip { + left: 100%; + opacity: 1; + visibility: visible; + pointer-events: auto; + z-index: -10; +} +.tooltip-container:hover { + transform: translateX(-50px); + transition: 0.5s linear; +} diff --git a/assets/html_files/tooltips.html b/assets/html_files/tooltips.html index 5c390a44..35d7e9aa 100644 --- a/assets/html_files/tooltips.html +++ b/assets/html_files/tooltips.html @@ -1,172 +1,418 @@ + + + + + + + + + + + + + + + Beautiify | Tooltips + - - - - - - - - - - - - - - - Beautiify | Tooltips - + +
+
+
+
+
- -
-
-
-
-
+
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ -
+
+
Tooltips
+ + -
-
Tooltips
- - +
+ +

+ Hmmm, we are not getting any result.
+ Our bad - Please try another search! +

+
-
- -

Hmmm, we are not getting any result.
Our bad - Please try another search!

-
+
+
+

Animated Tooltip

+
+ + + +
+
+ + + +
+
+
+

Gradient Tooltip

+
+ + + +
+
+ + + +
+
+
+

Linked Apps Tooltip

+
+ + + +
+
+ + + +
+
+
+

Shopping Cart Tooltip

+
+ + + +
+
+ + + +
+
+
+

Show Counts Tooltip

+
+ + + +
+
+ + + +
+
+
+
-
-
-

Animated Tooltip

-
- - - -
-
- - - -
-
-
-

Linked Apps Tooltip

-
- - - -
-
- - - -
-
-
-

Shopping Cart Tooltip

-
- - - -
-
- - - -
-
-
-

Show Counts Tooltip

-
- - - -
-
- - - -
-
-
-
- - -
- -
- - - - - - - - + +
+ +
+ + + + + + + From a63720a07f62bf954ccac1ec244e1c5e7467760e Mon Sep 17 00:00:00 2001 From: Harshil Gupta Date: Thu, 1 Aug 2024 22:25:20 +0530 Subject: [PATCH 02/10] Added new Mario themed tootip --- .../Tooltips/Mario-Themed-Tooltip/index.html | 16 + .../Tooltips/Mario-Themed-Tooltip/style.css | 279 +++++++++ assets/html_files/tooltips.html | 564 +++++++++++++----- 3 files changed, 700 insertions(+), 159 deletions(-) create mode 100644 Components/Tooltips/Mario-Themed-Tooltip/index.html create mode 100644 Components/Tooltips/Mario-Themed-Tooltip/style.css diff --git a/Components/Tooltips/Mario-Themed-Tooltip/index.html b/Components/Tooltips/Mario-Themed-Tooltip/index.html new file mode 100644 index 00000000..71602dbc --- /dev/null +++ b/Components/Tooltips/Mario-Themed-Tooltip/index.html @@ -0,0 +1,16 @@ + + + + + + Mario Themed Tooltip + + +
+
+
+
+
+
+ + diff --git a/Components/Tooltips/Mario-Themed-Tooltip/style.css b/Components/Tooltips/Mario-Themed-Tooltip/style.css new file mode 100644 index 00000000..2b71ef66 --- /dev/null +++ b/Components/Tooltips/Mario-Themed-Tooltip/style.css @@ -0,0 +1,279 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #f5f5f5; + margin: 0; + font-family: "Poppins", sans-serif; +} +.brick { + height: 2px; + width: 2px; + box-shadow: 2px 2px 0px #ff9999, 4px 2px 0px #ff9999, 6px 2px 0px #ff9999, + 8px 2px 0px #ff9999, 10px 2px 0px #ff9999, 12px 2px 0px #ff9999, + 14px 2px 0px #ff9999, 16px 2px 0px #ff9999, 18px 2px 0px #ff9999, + 20px 2px 0px #ff9999, 22px 2px 0px #ff9999, 24px 2px 0px #ff9999, + 26px 2px 0px #ff9999, 28px 2px 0px #ff9999, 30px 2px 0px #ff9999, + 32px 2px 0px #ff9999, 2px 4px 0px #cc3300, 4px 4px 0px #cc3300, + 6px 4px 0px #cc3300, 8px 4px 0px #cc3300, 10px 4px 0px #cc3300, + 12px 4px 0px #cc3300, 14px 4px 0px #cc3300, 16px 4px 0px #000, + 18px 4px 0px #cc3300, 20px 4px 0px #cc3300, 22px 4px 0px #cc3300, + 24px 4px 0px #cc3300, 26px 4px 0px #cc3300, 28px 4px 0px #cc3300, + 30px 4px 0px #cc3300, 32px 4px 0px #000, 2px 6px 0px #cc3300, + 4px 6px 0px #cc3300, 6px 6px 0px #cc3300, 8px 6px 0px #cc3300, + 10px 6px 0px #cc3300, 12px 6px 0px #cc3300, 14px 6px 0px #cc3300, + 16px 6px 0px #000, 18px 6px 0px #cc3300, 20px 6px 0px #cc3300, + 22px 6px 0px #cc3300, 24px 6px 0px #cc3300, 26px 6px 0px #cc3300, + 28px 6px 0px #cc3300, 30px 6px 0px #cc3300, 32px 6px 0px #000, + 2px 8px 0px #000, 4px 8px 0px #000, 6px 8px 0px #000, 8px 8px 0px #000, + 10px 8px 0px #000, 12px 8px 0px #000, 14px 8px 0px #000, 16px 8px 0px #000, + 18px 8px 0px #000, 20px 8px 0px #000, 22px 8px 0px #000, 24px 8px 0px #000, + 26px 8px 0px #000, 28px 8px 0px #000, 30px 8px 0px #000, 32px 8px 0px #000, + 2px 10px 0px #cc3300, 4px 10px 0px #cc3300, 6px 10px 0px #cc3300, + 8px 10px 0px #000, 10px 10px 0px #cc3300, 12px 10px 0px #cc3300, + 14px 10px 0px #cc3300, 16px 10px 0px #cc3300, 18px 10px 0px #cc3300, + 20px 10px 0px #cc3300, 22px 10px 0px #cc3300, 24px 10px 0px #000, + 26px 10px 0px #cc3300, 28px 10px 0px #cc3300, 30px 10px 0px #cc3300, + 32px 10px 0px #cc3300, 2px 12px 0px #cc3300, 4px 12px 0px #cc3300, + 6px 12px 0px #cc3300, 8px 12px 0px #000, 10px 12px 0px #cc3300, + 12px 12px 0px #cc3300, 14px 12px 0px #cc3300, 16px 12px 0px #cc3300, + 18px 12px 0px #cc3300, 20px 12px 0px #cc3300, 22px 12px 0px #cc3300, + 24px 12px 0px #000, 26px 12px 0px #cc3300, 28px 12px 0px #cc3300, + 30px 12px 0px #cc3300, 32px 12px 0px #cc3300, 2px 14px 0px #cc3300, + 4px 14px 0px #cc3300, 6px 14px 0px #cc3300, 8px 14px 0px #000, + 10px 14px 0px #cc3300, 12px 14px 0px #cc3300, 14px 14px 0px #cc3300, + 16px 14px 0px #cc3300, 18px 14px 0px #cc3300, 20px 14px 0px #cc3300, + 22px 14px 0px #cc3300, 24px 14px 0px #000, 26px 14px 0px #cc3300, + 28px 14px 0px #cc3300, 30px 14px 0px #cc3300, 32px 14px 0px #cc3300, + 2px 16px 0px #000, 4px 16px 0px #000, 6px 16px 0px #000, 8px 16px 0px #000, + 10px 16px 0px #000, 12px 16px 0px #000, 14px 16px 0px #000, + 16px 16px 0px #000, 18px 16px 0px #000, 20px 16px 0px #000, + 22px 16px 0px #000, 24px 16px 0px #000, 26px 16px 0px #000, + 28px 16px 0px #000, 30px 16px 0px #000, 32px 16px 0px #000, + 2px 18px 0px #cc3300, 4px 18px 0px #cc3300, 6px 18px 0px #cc3300, + 8px 18px 0px #cc3300, 10px 18px 0px #cc3300, 12px 18px 0px #cc3300, + 14px 18px 0px #cc3300, 16px 18px 0px #000, 18px 18px 0px #cc3300, + 20px 18px 0px #cc3300, 22px 18px 0px #cc3300, 24px 18px 0px #cc3300, + 26px 18px 0px #cc3300, 28px 18px 0px #cc3300, 30px 18px 0px #cc3300, + 32px 18px 0px #000, 2px 20px 0px #cc3300, 4px 20px 0px #cc3300, + 6px 20px 0px #cc3300, 8px 20px 0px #cc3300, 10px 20px 0px #cc3300, + 12px 20px 0px #cc3300, 14px 20px 0px #cc3300, 16px 20px 0px #000, + 18px 20px 0px #cc3300, 20px 20px 0px #cc3300, 22px 20px 0px #cc3300, + 24px 20px 0px #cc3300, 26px 20px 0px #cc3300, 28px 20px 0px #cc3300, + 30px 20px 0px #cc3300, 32px 20px 0px #000, 2px 22px 0px #cc3300, + 4px 22px 0px #cc3300, 6px 22px 0px #cc3300, 8px 22px 0px #cc3300, + 10px 22px 0px #cc3300, 12px 22px 0px #cc3300, 14px 22px 0px #cc3300, + 16px 22px 0px #000, 18px 22px 0px #cc3300, 20px 22px 0px #cc3300, + 22px 22px 0px #cc3300, 24px 22px 0px #cc3300, 26px 22px 0px #cc3300, + 28px 22px 0px #cc3300, 30px 22px 0px #cc3300, 32px 22px 0px #000, + 2px 24px 0px #000, 4px 24px 0px #000, 6px 24px 0px #000, 8px 24px 0px #000, + 10px 24px 0px #000, 12px 24px 0px #000, 14px 24px 0px #000, + 16px 24px 0px #000, 18px 24px 0px #000, 20px 24px 0px #000, + 22px 24px 0px #000, 24px 24px 0px #000, 26px 24px 0px #000, + 28px 24px 0px #000, 30px 24px 0px #000, 32px 24px 0px #000, + 2px 26px 0px #cc3300, 4px 26px 0px #cc3300, 6px 26px 0px #cc3300, + 8px 26px 0px #000, 10px 26px 0px #cc3300, 12px 26px 0px #cc3300, + 14px 26px 0px #cc3300, 16px 26px 0px #cc3300, 18px 26px 0px #cc3300, + 20px 26px 0px #cc3300, 22px 26px 0px #cc3300, 24px 26px 0px #000, + 26px 26px 0px #cc3300, 28px 26px 0px #cc3300, 30px 26px 0px #cc3300, + 32px 26px 0px #cc3300, 2px 28px 0px #cc3300, 4px 28px 0px #cc3300, + 6px 28px 0px #cc3300, 8px 28px 0px #000, 10px 28px 0px #cc3300, + 12px 28px 0px #cc3300, 14px 28px 0px #cc3300, 16px 28px 0px #cc3300, + 18px 28px 0px #cc3300, 20px 28px 0px #cc3300, 22px 28px 0px #cc3300, + 24px 28px 0px #000, 26px 28px 0px #cc3300, 28px 28px 0px #cc3300, + 30px 28px 0px #cc3300, 32px 28px 0px #cc3300, 2px 30px 0px #cc3300, + 4px 30px 0px #cc3300, 6px 30px 0px #cc3300, 8px 30px 0px #000, + 10px 30px 0px #cc3300, 12px 30px 0px #cc3300, 14px 30px 0px #cc3300, + 16px 30px 0px #cc3300, 18px 30px 0px #cc3300, 20px 30px 0px #cc3300, + 22px 30px 0px #cc3300, 24px 30px 0px #000, 26px 30px 0px #cc3300, + 28px 30px 0px #cc3300, 30px 30px 0px #cc3300, 32px 30px 0px #cc3300, + 2px 32px 0px #000, 4px 32px 0px #000, 6px 32px 0px #000, 8px 32px 0px #000, + 10px 32px 0px #000, 12px 32px 0px #000, 14px 32px 0px #000, + 16px 32px 0px #000, 18px 32px 0px #000, 20px 32px 0px #000, + 22px 32px 0px #000, 24px 32px 0px #000, 26px 32px 0px #000, + 28px 32px 0px #000, 30px 32px 0px #000, 32px 32px 0px #000; +} +.brick.one { + transform: translateX(-60px); +} +.mush { + height: 2px; + width: 2px; + box-shadow: 14px 2px 0px #fc9838, 16px 2px 0px #fc9838, 18px 2px 0px #fc9838, + 20px 2px 0px #fc9838, 12px 4px 0px #fc9838, 14px 4px 0px #fc9838, + 16px 4px 0px #fc9838, 18px 4px 0px #fc9838, 20px 4px 0px #d82800, + 22px 4px 0px #d82800, 10px 6px 0px #fc9838, 12px 6px 0px #fc9838, + 14px 6px 0px #fc9838, 16px 6px 0px #fc9838, 18px 6px 0px #d82800, + 20px 6px 0px #d82800, 22px 6px 0px #d82800, 24px 6px 0px #d82800, + 8px 8px 0px #fc9838, 10px 8px 0px #fc9838, 12px 8px 0px #fc9838, + 14px 8px 0px #fc9838, 16px 8px 0px #fc9838, 18px 8px 0px #d82800, + 20px 8px 0px #d82800, 22px 8px 0px #d82800, 24px 8px 0px #d82800, + 26px 8px 0px #d82800, 6px 10px 0px #fc9838, 8px 10px 0px #fc9838, + 10px 10px 0px #fc9838, 12px 10px 0px #fc9838, 14px 10px 0px #fc9838, + 16px 10px 0px #fc9838, 18px 10px 0px #fc9838, 20px 10px 0px #d82800, + 22px 10px 0px #d82800, 24px 10px 0px #d82800, 26px 10px 0px #fc9838, + 28px 10px 0px #fc9838, 4px 12px 0px #fc9838, 6px 12px 0px #fc9838, + 8px 12px 0px #d82800, 10px 12px 0px #d82800, 12px 12px 0px #d82800, + 14px 12px 0px #fc9838, 16px 12px 0px #fc9838, 18px 12px 0px #fc9838, + 20px 12px 0px #fc9838, 22px 12px 0px #fc9838, 24px 12px 0px #fc9838, + 26px 12px 0px #fc9838, 28px 12px 0px #fc9838, 30px 12px 0px #fc9838, + 4px 14px 0px #fc9838, 6px 14px 0px #d82800, 8px 14px 0px #d82800, + 10px 14px 0px #d82800, 12px 14px 0px #d82800, 14px 14px 0px #d82800, + 16px 14px 0px #fc9838, 18px 14px 0px #fc9838, 20px 14px 0px #fc9838, + 22px 14px 0px #fc9838, 24px 14px 0px #fc9838, 26px 14px 0px #fc9838, + 28px 14px 0px #fc9838, 30px 14px 0px #fc9838, 2px 16px 0px #fc9838, + 4px 16px 0px #fc9838, 6px 16px 0px #d82800, 8px 16px 0px #d82800, + 10px 16px 0px #d82800, 12px 16px 0px #d82800, 14px 16px 0px #d82800, + 16px 16px 0px #fc9838, 18px 16px 0px #fc9838, 20px 16px 0px #fc9838, + 22px 16px 0px #fc9838, 24px 16px 0px #fc9838, 26px 16px 0px #d82800, + 28px 16px 0px #d82800, 30px 16px 0px #fc9838, 32px 16px 0px #fc9838, + 2px 18px 0px #fc9838, 4px 18px 0px #fc9838, 6px 18px 0px #d82800, + 8px 18px 0px #d82800, 10px 18px 0px #d82800, 12px 18px 0px #d82800, + 14px 18px 0px #d82800, 16px 18px 0px #fc9838, 18px 18px 0px #fc9838, + 20px 18px 0px #fc9838, 22px 18px 0px #fc9838, 24px 18px 0px #fc9838, + 26px 18px 0px #d82800, 28px 18px 0px #d82800, 30px 18px 0px #d82800, + 32px 18px 0px #fc9838, 2px 20px 0px #fc9838, 4px 20px 0px #fc9838, + 6px 20px 0px #fc9838, 8px 20px 0px #d82800, 10px 20px 0px #d82800, + 12px 20px 0px #d82800, 14px 20px 0px #fc9838, 16px 20px 0px #fc9838, + 18px 20px 0px #fc9838, 20px 20px 0px #fc9838, 22px 20px 0px #fc9838, + 24px 20px 0px #fc9838, 26px 20px 0px #fc9838, 28px 20px 0px #d82800, + 30px 20px 0px #d82800, 32px 20px 0px #fc9838, 2px 22px 0px #fc9838, + 4px 22px 0px #fc9838, 6px 22px 0px #fc9838, 8px 22px 0px #fc9838, + 10px 22px 0px #fc9838, 12px 22px 0px #fc9838, 14px 22px 0px #fc9838, + 16px 22px 0px #fc9838, 18px 22px 0px #fc9838, 20px 22px 0px #fc9838, + 22px 22px 0px #fc9838, 24px 22px 0px #fc9838, 26px 22px 0px #fc9838, + 28px 22px 0px #fc9838, 30px 22px 0px #fc9838, 32px 22px 0px #fc9838, + 4px 24px 0px #fc9838, 6px 24px 0px #d82800, 8px 24px 0px #d82800, + 10px 24px 0px #d82800, 12px 24px 0px #fff, 14px 24px 0px #fff, + 16px 24px 0px #fff, 18px 24px 0px #fff, 20px 24px 0px #fff, + 22px 24px 0px #fff, 24px 24px 0px #d82800, 26px 24px 0px #d82800, + 28px 24px 0px #d82800, 30px 24px 0px #fc9838, 10px 26px 0px #fff, + 12px 26px 0px #fff, 14px 26px 0px #fff, 16px 26px 0px #fff, + 18px 26px 0px #fff, 20px 26px 0px #fff, 22px 26px 0px #fff, + 24px 26px 0px #fff, 10px 28px 0px #fff, 12px 28px 0px #fff, + 14px 28px 0px #fff, 16px 28px 0px #fff, 18px 28px 0px #fff, + 20px 28px 0px #fff, 22px 28px 0px #fc9838, 24px 28px 0px #fff, + 10px 30px 0px #fff, 12px 30px 0px #fff, 14px 30px 0px #fff, + 16px 30px 0px #fff, 18px 30px 0px #fff, 20px 30px 0px #fff, + 22px 30px 0px #fc9838, 24px 30px 0px #fff, 12px 32px 0px #fff, + 14px 32px 0px #fff, 16px 32px 0px #fff, 18px 32px 0px #fff, + 20px 32px 0px #fc9838, 22px 32px 0px #fff; + transform: translate(-0px, -0px); + z-index: -1; + opacity: 0; +} +.box { + position: absolute; + background-color: rgba(46, 37, 37, 0); + z-index: 3; + width: 34px; + height: 34px; +} +.box:hover + .mush { + animation: mush 0.5s linear forwards; + opacity: 1; +} +@keyframes mush { + 0% { + transform: scale(0.8) translate(-0px, -0px); + } + 50% { + transform: scale(1.1) translate(-0px, -80px); + } + 100% { + transform: scale(1.1) translate(-0px, -35px); + } +} +.tooltip-mario-container { + height: 2px; + width: 2px; + box-shadow: 4px 2px 0px #ce3100, 6px 2px 0px #ce3100, 8px 2px 0px #ce3100, + 10px 2px 0px #ce3100, 12px 2px 0px #ce3100, 14px 2px 0px #ce3100, + 16px 2px 0px #ce3100, 18px 2px 0px #ce3100, 20px 2px 0px #ce3100, + 22px 2px 0px #ce3100, 24px 2px 0px #ce3100, 26px 2px 0px #ce3100, + 28px 2px 0px #ce3100, 30px 2px 0px #ce3100, 2px 4px 0px #ce3100, + 4px 4px 0px #ff9c31, 6px 4px 0px #ff9c31, 8px 4px 0px #ff9c31, + 10px 4px 0px #ff9c31, 12px 4px 0px #ff9c31, 14px 4px 0px #ff9c31, + 16px 4px 0px #ff9c31, 18px 4px 0px #ff9c31, 20px 4px 0px #ff9c31, + 22px 4px 0px #ff9c31, 24px 4px 0px #ff9c31, 26px 4px 0px #ff9c31, + 28px 4px 0px #ff9c31, 30px 4px 0px #ff9c31, 32px 4px 0px #000, + 2px 6px 0px #ce3100, 4px 6px 0px #ff9c31, 6px 6px 0px #000, + 8px 6px 0px #ff9c31, 10px 6px 0px #ff9c31, 12px 6px 0px #ff9c31, + 14px 6px 0px #ff9c31, 16px 6px 0px #ff9c31, 18px 6px 0px #ff9c31, + 20px 6px 0px #ff9c31, 22px 6px 0px #ff9c31, 24px 6px 0px #ff9c31, + 26px 6px 0px #ff9c31, 28px 6px 0px #000, 30px 6px 0px #ff9c31, + 32px 6px 0px #000, 2px 8px 0px #ce3100, 4px 8px 0px #ff9c31, + 6px 8px 0px #ff9c31, 8px 8px 0px #ff9c31, 10px 8px 0px #ff9c31, + 12px 8px 0px #ce3100, 14px 8px 0px #ce3100, 16px 8px 0px #ce3100, + 18px 8px 0px #ce3100, 20px 8px 0px #ce3100, 22px 8px 0px #ff9c31, + 24px 8px 0px #ff9c31, 26px 8px 0px #ff9c31, 28px 8px 0px #ff9c31, + 30px 8px 0px #ff9c31, 32px 8px 0px #000, 2px 10px 0px #ce3100, + 4px 10px 0px #ff9c31, 6px 10px 0px #ff9c31, 8px 10px 0px #ff9c31, + 10px 10px 0px #ce3100, 12px 10px 0px #ce3100, 14px 10px 0px #000, + 16px 10px 0px #000, 18px 10px 0px #000, 20px 10px 0px #ce3100, + 22px 10px 0px #ce3100, 24px 10px 0px #ff9c31, 26px 10px 0px #ff9c31, + 28px 10px 0px #ff9c31, 30px 10px 0px #ff9c31, 32px 10px 0px #000, + 2px 12px 0px #ce3100, 4px 12px 0px #ff9c31, 6px 12px 0px #ff9c31, + 8px 12px 0px #ff9c31, 10px 12px 0px #ce3100, 12px 12px 0px #ce3100, + 14px 12px 0px #000, 16px 12px 0px #ff9c31, 18px 12px 0px #ff9c31, + 20px 12px 0px #ce3100, 22px 12px 0px #ce3100, 24px 12px 0px #000, + 26px 12px 0px #ff9c31, 28px 12px 0px #ff9c31, 30px 12px 0px #ff9c31, + 32px 12px 0px #000, 2px 14px 0px #ce3100, 4px 14px 0px #ff9c31, + 6px 14px 0px #ff9c31, 8px 14px 0px #ff9c31, 10px 14px 0px #ce3100, + 12px 14px 0px #ce3100, 14px 14px 0px #000, 16px 14px 0px #ff9c31, + 18px 14px 0px #ff9c31, 20px 14px 0px #ce3100, 22px 14px 0px #ce3100, + 24px 14px 0px #000, 26px 14px 0px #ff9c31, 28px 14px 0px #ff9c31, + 30px 14px 0px #ff9c31, 32px 14px 0px #000, 2px 16px 0px #ce3100, + 4px 16px 0px #ff9c31, 6px 16px 0px #ff9c31, 8px 16px 0px #ff9c31, + 10px 16px 0px #ff9c31, 12px 16px 0px #000, 14px 16px 0px #000, + 16px 16px 0px #ff9c31, 18px 16px 0px #ce3100, 20px 16px 0px #ce3100, + 22px 16px 0px #ce3100, 24px 16px 0px #000, 26px 16px 0px #ff9c31, + 28px 16px 0px #ff9c31, 30px 16px 0px #ff9c31, 32px 16px 0px #000, + 2px 18px 0px #ce3100, 4px 18px 0px #ff9c31, 6px 18px 0px #ff9c31, + 8px 18px 0px #ff9c31, 10px 18px 0px #ff9c31, 12px 18px 0px #ff9c31, + 14px 18px 0px #ff9c31, 16px 18px 0px #ce3100, 18px 18px 0px #ce3100, + 20px 18px 0px #000, 22px 18px 0px #000, 24px 18px 0px #000, + 26px 18px 0px #ff9c31, 28px 18px 0px #ff9c31, 30px 18px 0px #ff9c31, + 32px 18px 0px #000, 2px 20px 0px #ce3100, 4px 20px 0px #ff9c31, + 6px 20px 0px #ff9c31, 8px 20px 0px #ff9c31, 10px 20px 0px #ff9c31, + 12px 20px 0px #ff9c31, 14px 20px 0px #ff9c31, 16px 20px 0px #ce3100, + 18px 20px 0px #ce3100, 20px 20px 0px #000, 22px 20px 0px #ff9c31, + 24px 20px 0px #ff9c31, 26px 20px 0px #ff9c31, 28px 20px 0px #ff9c31, + 30px 20px 0px #ff9c31, 32px 20px 0px #000, 2px 22px 0px #ce3100, + 4px 22px 0px #ff9c31, 6px 22px 0px #ff9c31, 8px 22px 0px #ff9c31, + 10px 22px 0px #ff9c31, 12px 22px 0px #ff9c31, 14px 22px 0px #ff9c31, + 16px 22px 0px #ff9c31, 18px 22px 0px #000, 20px 22px 0px #000, + 22px 22px 0px #ff9c31, 24px 22px 0px #ff9c31, 26px 22px 0px #ff9c31, + 28px 22px 0px #ff9c31, 30px 22px 0px #ff9c31, 32px 22px 0px #000, + 2px 24px 0px #ce3100, 4px 24px 0px #ff9c31, 6px 24px 0px #ff9c31, + 8px 24px 0px #ff9c31, 10px 24px 0px #ff9c31, 12px 24px 0px #ff9c31, + 14px 24px 0px #ff9c31, 16px 24px 0px #ce3100, 18px 24px 0px #ce3100, + 20px 24px 0px #ff9c31, 22px 24px 0px #ff9c31, 24px 24px 0px #ff9c31, + 26px 24px 0px #ff9c31, 28px 24px 0px #ff9c31, 30px 24px 0px #ff9c31, + 32px 24px 0px #000, 2px 26px 0px #ce3100, 4px 26px 0px #ff9c31, + 6px 26px 0px #ff9c31, 8px 26px 0px #ff9c31, 10px 26px 0px #ff9c31, + 12px 26px 0px #ff9c31, 14px 26px 0px #ff9c31, 16px 26px 0px #ce3100, + 18px 26px 0px #ce3100, 20px 26px 0px #000, 22px 26px 0px #ff9c31, + 24px 26px 0px #ff9c31, 26px 26px 0px #ff9c31, 28px 26px 0px #ff9c31, + 30px 26px 0px #ff9c31, 32px 26px 0px #000, 2px 28px 0px #ce3100, + 4px 28px 0px #ff9c31, 6px 28px 0px #000, 8px 28px 0px #ff9c31, + 10px 28px 0px #ff9c31, 12px 28px 0px #ff9c31, 14px 28px 0px #ff9c31, + 16px 28px 0px #ff9c31, 18px 28px 0px #000, 20px 28px 0px #000, + 22px 28px 0px #ff9c31, 24px 28px 0px #ff9c31, 26px 28px 0px #ff9c31, + 28px 28px 0px #000, 30px 28px 0px #ff9c31, 32px 28px 0px #000, + 2px 30px 0px #ce3100, 4px 30px 0px #ff9c31, 6px 30px 0px #ff9c31, + 8px 30px 0px #ff9c31, 10px 30px 0px #ff9c31, 12px 30px 0px #ff9c31, + 14px 30px 0px #ff9c31, 16px 30px 0px #ff9c31, 18px 30px 0px #ff9c31, + 20px 30px 0px #ff9c31, 22px 30px 0px #ff9c31, 24px 30px 0px #ff9c31, + 26px 30px 0px #ff9c31, 28px 30px 0px #ff9c31, 30px 30px 0px #ff9c31, + 32px 30px 0px #000, 2px 32px 0px #000, 4px 32px 0px #000, 6px 32px 0px #000, + 8px 32px 0px #000, 10px 32px 0px #000, 12px 32px 0px #000, + 14px 32px 0px #000, 16px 32px 0px #000, 18px 32px 0px #000, + 20px 32px 0px #000, 22px 32px 0px #000, 24px 32px 0px #000, + 26px 32px 0px #000, 28px 32px 0px #000, 30px 32px 0px #000, + 32px 32px 0px #000; + position: absolute; + transform: translate(-30px); + z-index: 3; +} diff --git a/assets/html_files/tooltips.html b/assets/html_files/tooltips.html index 5c390a44..90b885cd 100644 --- a/assets/html_files/tooltips.html +++ b/assets/html_files/tooltips.html @@ -1,172 +1,418 @@ + + + + + + + + + + + + + + + Beautiify | Tooltips + - - - - - - - - - - - - - - - Beautiify | Tooltips - + +
+
+
+
+
- -
-
-
-
-
+
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ -
+
+
Tooltips
+ + -
-
Tooltips
- - +
+ +

+ Hmmm, we are not getting any result.
+ Our bad - Please try another search! +

+
-
- -

Hmmm, we are not getting any result.
Our bad - Please try another search!

-
+
+
+

Animated Tooltip

+
+ + + +
+
+ + + +
+
+
+

Linked Apps Tooltip

+
+ + + +
+
+ + + +
+
+
+

Mario Themed Tooltip

+
+ + + +
+
+ + + +
+
+
+

Shopping Cart Tooltip

+
+ + + +
+
+ + + +
+
+
+

Show Counts Tooltip

+
+ + + +
+
+ + + +
+
+
+
-
-
-

Animated Tooltip

-
- - - -
-
- - - -
-
-
-

Linked Apps Tooltip

-
- - - -
-
- - - -
-
-
-

Shopping Cart Tooltip

-
- - - -
-
- - - -
-
-
-

Show Counts Tooltip

-
- - - -
-
- - - -
-
-
-
- - -
- -
- - - - - - - - + +
+ +
+ + + + + + + From 77ef0c4ce45512816831fab490860af6f61dad5e Mon Sep 17 00:00:00 2001 From: Harshil Gupta Date: Thu, 1 Aug 2024 22:27:17 +0530 Subject: [PATCH 03/10] Fixes --- Components/Tooltips/Mario-Themed-Tooltip/index.html | 1 + Components/Tooltips/Mario-Themed-Tooltip/style.css | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/Components/Tooltips/Mario-Themed-Tooltip/index.html b/Components/Tooltips/Mario-Themed-Tooltip/index.html index 71602dbc..176478f6 100644 --- a/Components/Tooltips/Mario-Themed-Tooltip/index.html +++ b/Components/Tooltips/Mario-Themed-Tooltip/index.html @@ -4,6 +4,7 @@ Mario Themed Tooltip +
diff --git a/Components/Tooltips/Mario-Themed-Tooltip/style.css b/Components/Tooltips/Mario-Themed-Tooltip/style.css index 2b71ef66..cc100be6 100644 --- a/Components/Tooltips/Mario-Themed-Tooltip/style.css +++ b/Components/Tooltips/Mario-Themed-Tooltip/style.css @@ -3,7 +3,7 @@ body { justify-content: center; align-items: center; height: 100vh; - background-color: #f5f5f5; + background-color: #000; margin: 0; font-family: "Poppins", sans-serif; } From b99a54cb8285892137950b6b9dfe95c2e49b1bb2 Mon Sep 17 00:00:00 2001 From: Harshil Gupta Date: Sat, 3 Aug 2024 13:45:11 +0530 Subject: [PATCH 04/10] Conflicts resolved --- assets/html_files/tooltips.html | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/assets/html_files/tooltips.html b/assets/html_files/tooltips.html index 58461139..641d5b10 100644 --- a/assets/html_files/tooltips.html +++ b/assets/html_files/tooltips.html @@ -316,6 +316,19 @@

Linked Apps Tooltip

+
+

Mario Themed Tooltip

+
+ + + +
+
+ + + +
+

Shopping Cart Tooltip

From 29ab01401161ae71f40da473ab891e0924ed12b4 Mon Sep 17 00:00:00 2001 From: Harshil Gupta Date: Sat, 3 Aug 2024 13:52:00 +0530 Subject: [PATCH 05/10] Added gradient tooltip --- assets/html_files/tooltips.html | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/assets/html_files/tooltips.html b/assets/html_files/tooltips.html index 58461139..b6035932 100644 --- a/assets/html_files/tooltips.html +++ b/assets/html_files/tooltips.html @@ -303,6 +303,19 @@

Animated Tooltip

+
+

Gradient Tooltip

+
+ + + +
+
+ + + +
+

Linked Apps Tooltip

From e067fd26b308df7e37c8b4904a621559e820f775 Mon Sep 17 00:00:00 2001 From: Harshil Gupta Date: Sat, 3 Aug 2024 13:53:16 +0530 Subject: [PATCH 06/10] Added icon --- Components/Tooltips/Gradient-Tooltip/index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Components/Tooltips/Gradient-Tooltip/index.html b/Components/Tooltips/Gradient-Tooltip/index.html index 843b2e68..9c44f548 100644 --- a/Components/Tooltips/Gradient-Tooltip/index.html +++ b/Components/Tooltips/Gradient-Tooltip/index.html @@ -5,6 +5,8 @@ Gradient Tooltip + +
From a4a218f5cd9f17780bca42970634f4b44e51e21b Mon Sep 17 00:00:00 2001 From: Harshil Gupta Date: Sat, 3 Aug 2024 14:07:09 +0530 Subject: [PATCH 07/10] Indentation fixed --- assets/html_files/tooltips.html | 403 +++++++++----------------------- 1 file changed, 105 insertions(+), 298 deletions(-) diff --git a/assets/html_files/tooltips.html b/assets/html_files/tooltips.html index ee2f2a99..86bc93cf 100644 --- a/assets/html_files/tooltips.html +++ b/assets/html_files/tooltips.html @@ -1,293 +1,104 @@ - - - - - - - - - - - - - - - Beautiify | Tooltips - - -
-
-
-
-
+ + + + + + + + + + + + + + + Beautiify | Tooltips + -
-
-
+ +
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
-
- -
+
+ +
-
-
Tooltips
- - +
+
Tooltips
+ + -
- -

- Hmmm, we are not getting any result.
- Our bad - Please try another search! -

-
+
+ +

Hmmm, we are not getting any result.
Our bad - Please try another search!

+
@@ -384,21 +195,17 @@

User Profile Tooltip

- -
- -
+ +
+ +
+ + + + + + + + - - - - - - - - + \ No newline at end of file From 8bc345b3a66fe2a0929b666569176b80a8f32083 Mon Sep 17 00:00:00 2001 From: Harshil Gupta Date: Sun, 4 Aug 2024 21:29:13 +0530 Subject: [PATCH 08/10] fixing tooltip indentation --- .../Tooltips/Gradient-Tooltip/index.html | 1 - .../Tooltips/Gradient-Tooltip/style.css | 52 +++++++++++-------- 2 files changed, 29 insertions(+), 24 deletions(-) diff --git a/Components/Tooltips/Gradient-Tooltip/index.html b/Components/Tooltips/Gradient-Tooltip/index.html index 9c44f548..10a0a742 100644 --- a/Components/Tooltips/Gradient-Tooltip/index.html +++ b/Components/Tooltips/Gradient-Tooltip/index.html @@ -6,7 +6,6 @@ Gradient Tooltip -
diff --git a/Components/Tooltips/Gradient-Tooltip/style.css b/Components/Tooltips/Gradient-Tooltip/style.css index 6721f8e6..18129a16 100644 --- a/Components/Tooltips/Gradient-Tooltip/style.css +++ b/Components/Tooltips/Gradient-Tooltip/style.css @@ -8,19 +8,20 @@ body { font-family: "Poppins", sans-serif; } + .tooltip-container { position: relative; background-color: #ff3cac; background-image: linear-gradient( - 225deg, - #ff3cac 0%, - #784ba0 50%, - #2b86c5 100% + 225deg, + #ff3cac 0%, + #784ba0 50%, + #2b86c5 100% ); cursor: pointer; transition: all 0.2s; font-size: 17px; - + width: 50px; height: 50px; border-radius: 50%; @@ -31,6 +32,7 @@ body { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); } + .tooltip-container .borde-back { width: 60px; height: 60px; @@ -41,7 +43,7 @@ body { border-radius: 50%; box-shadow: none; } - + .tooltip-container .icon { width: 50px; height: 50px; @@ -52,19 +54,21 @@ body { z-index: 10; background-color: #ff3cac; background-image: linear-gradient( - 225deg, - #ff3cac 0%, - #784ba0 50%, - #2b86c5 100% + 225deg, + #ff3cac 0%, + #784ba0 50%, + #2b86c5 100% ); cursor: pointer; } - + .tooltip { position: absolute; top: -2; - left: -45px; - transform: translateX(-32%); + left: -45px; + transform: translateX( + -32% + ); width: 160px; height: 52px; opacity: 0; @@ -73,10 +77,10 @@ body { border-radius: 50px; background-color: #ff3cac; background-image: linear-gradient( - 225deg, - #ff3cac 0%, - #784ba0 50%, - #2b86c5 100% + 225deg, + #ff3cac 0%, + #784ba0 50%, + #2b86c5 100% ); display: flex; align-items: center; @@ -87,26 +91,28 @@ body { font-family: sans-serif; font-weight: 800px; } - + .tooltip::before { position: absolute; content: ""; height: 0.6em; width: 0.6em; - right: -0.2em; - top: 50%; - transform: translateY(-50%) rotate(45deg); + right: -0.2em; + top: 50%; + transform: translateY(-50%) rotate(45deg); background: var(--background); } - + .tooltip-container:hover .tooltip { - left: 100%; + left: 100%; opacity: 1; visibility: visible; pointer-events: auto; z-index: -10; } + .tooltip-container:hover { transform: translateX(-50px); transition: 0.5s linear; } + \ No newline at end of file From 4fb8ffcefded3054a42146318965ee981b38825c Mon Sep 17 00:00:00 2001 From: Harshil Gupta <144909381+hars-21@users.noreply.github.com> Date: Mon, 5 Aug 2024 21:12:50 +0530 Subject: [PATCH 09/10] Update index.html --- Components/Tooltips/Gradient-Tooltip/index.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/Components/Tooltips/Gradient-Tooltip/index.html b/Components/Tooltips/Gradient-Tooltip/index.html index 10a0a742..dd7d1a76 100644 --- a/Components/Tooltips/Gradient-Tooltip/index.html +++ b/Components/Tooltips/Gradient-Tooltip/index.html @@ -18,8 +18,7 @@ class="bi bi-discord" height="23" width="23" - xmlns="http://www.w3.org/2000/svg" - > + xmlns="http://www.w3.org/2000/svg"> From 95f9ab26b5e84a01542dde11dc0f8765434bdd18 Mon Sep 17 00:00:00 2001 From: Harshil Gupta Date: Fri, 9 Aug 2024 18:03:42 +0530 Subject: [PATCH 10/10] fix indentation --- .../Tooltips/Gradient-Tooltip/index.html | 56 +++++++++--------- .../Tooltips/Gradient-Tooltip/style.css | 57 ++++++++----------- .../Tooltips/Mario-Themed-Tooltip/index.html | 35 ++++++------ .../Tooltips/Mario-Themed-Tooltip/style.css | 13 ++++- 4 files changed, 81 insertions(+), 80 deletions(-) diff --git a/Components/Tooltips/Gradient-Tooltip/index.html b/Components/Tooltips/Gradient-Tooltip/index.html index 10a0a742..bfa0188f 100644 --- a/Components/Tooltips/Gradient-Tooltip/index.html +++ b/Components/Tooltips/Gradient-Tooltip/index.html @@ -1,32 +1,30 @@ - - - - Gradient Tooltip - - - - -
- Discover - -
-
- - - -
+ + + + + Gradient Tooltip + + + + + +
+ Discover + +
+
+ + + +
- -
- - +
+ +
+ + + \ No newline at end of file diff --git a/Components/Tooltips/Gradient-Tooltip/style.css b/Components/Tooltips/Gradient-Tooltip/style.css index 18129a16..5bbf2975 100644 --- a/Components/Tooltips/Gradient-Tooltip/style.css +++ b/Components/Tooltips/Gradient-Tooltip/style.css @@ -12,16 +12,14 @@ body { .tooltip-container { position: relative; background-color: #ff3cac; - background-image: linear-gradient( - 225deg, - #ff3cac 0%, - #784ba0 50%, - #2b86c5 100% - ); + background-image: linear-gradient(225deg, + #ff3cac 0%, + #784ba0 50%, + #2b86c5 100%); cursor: pointer; transition: all 0.2s; font-size: 17px; - + width: 50px; height: 50px; border-radius: 50%; @@ -43,7 +41,7 @@ body { border-radius: 50%; box-shadow: none; } - + .tooltip-container .icon { width: 50px; height: 50px; @@ -53,22 +51,18 @@ body { justify-content: center; z-index: 10; background-color: #ff3cac; - background-image: linear-gradient( - 225deg, - #ff3cac 0%, - #784ba0 50%, - #2b86c5 100% - ); + background-image: linear-gradient(225deg, + #ff3cac 0%, + #784ba0 50%, + #2b86c5 100%); cursor: pointer; } - + .tooltip { position: absolute; top: -2; - left: -45px; - transform: translateX( - -32% - ); + left: -45px; + transform: translateX(-32%); width: 160px; height: 52px; opacity: 0; @@ -76,12 +70,10 @@ body { transition: all 0.6s; border-radius: 50px; background-color: #ff3cac; - background-image: linear-gradient( - 225deg, - #ff3cac 0%, - #784ba0 50%, - #2b86c5 100% - ); + background-image: linear-gradient(225deg, + #ff3cac 0%, + #784ba0 50%, + #2b86c5 100%); display: flex; align-items: center; justify-content: right; @@ -91,20 +83,20 @@ body { font-family: sans-serif; font-weight: 800px; } - + .tooltip::before { position: absolute; content: ""; height: 0.6em; width: 0.6em; - right: -0.2em; - top: 50%; - transform: translateY(-50%) rotate(45deg); + right: -0.2em; + top: 50%; + transform: translateY(-50%) rotate(45deg); background: var(--background); } - + .tooltip-container:hover .tooltip { - left: 100%; + left: 100%; opacity: 1; visibility: visible; pointer-events: auto; @@ -114,5 +106,4 @@ body { .tooltip-container:hover { transform: translateX(-50px); transition: 0.5s linear; -} - \ No newline at end of file +} \ No newline at end of file diff --git a/Components/Tooltips/Mario-Themed-Tooltip/index.html b/Components/Tooltips/Mario-Themed-Tooltip/index.html index 69fb33f0..c7b3ee8e 100644 --- a/Components/Tooltips/Mario-Themed-Tooltip/index.html +++ b/Components/Tooltips/Mario-Themed-Tooltip/index.html @@ -1,18 +1,21 @@ - - - - Mario Themed Tooltip - - - - -
-
-
-
-
-
- - + + + + + Mario Themed Tooltip + + + + + +
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/Components/Tooltips/Mario-Themed-Tooltip/style.css b/Components/Tooltips/Mario-Themed-Tooltip/style.css index cc100be6..7ff264ba 100644 --- a/Components/Tooltips/Mario-Themed-Tooltip/style.css +++ b/Components/Tooltips/Mario-Themed-Tooltip/style.css @@ -7,6 +7,7 @@ body { margin: 0; font-family: "Poppins", sans-serif; } + .brick { height: 2px; width: 2px; @@ -94,9 +95,11 @@ body { 22px 32px 0px #000, 24px 32px 0px #000, 26px 32px 0px #000, 28px 32px 0px #000, 30px 32px 0px #000, 32px 32px 0px #000; } + .brick.one { transform: translateX(-60px); } + .mush { height: 2px; width: 2px; @@ -163,6 +166,7 @@ body { z-index: -1; opacity: 0; } + .box { position: absolute; background-color: rgba(46, 37, 37, 0); @@ -170,21 +174,26 @@ body { width: 34px; height: 34px; } -.box:hover + .mush { + +.box:hover+.mush { animation: mush 0.5s linear forwards; opacity: 1; } + @keyframes mush { 0% { transform: scale(0.8) translate(-0px, -0px); } + 50% { transform: scale(1.1) translate(-0px, -80px); } + 100% { transform: scale(1.1) translate(-0px, -35px); } } + .tooltip-mario-container { height: 2px; width: 2px; @@ -276,4 +285,4 @@ body { position: absolute; transform: translate(-30px); z-index: 3; -} +} \ No newline at end of file