From 42f865f5436c62deebf4b92479cf1b6d6e434c36 Mon Sep 17 00:00:00 2001
From: Subhamoy Biswas <subhamoybiswas636@gmail.com>
Date: Fri, 15 Dec 2023 22:21:50 +0530
Subject: [PATCH] (feat): added tooltips in flotingbar using popper.js and
 tippy.js

---
 htdocs/assets/_integrate.php     |  5 ++++-
 htdocs/assets/extra-style.css    | 20 ++++++++++++++++++
 htdocs/assets/js/tippy-config.js | 36 ++++++++++++++++++++++++++++++++
 htdocs/blog.php                  |  1 +
 htdocs/contact.php               |  1 +
 htdocs/dmca.php                  |  1 +
 htdocs/home.php                  |  1 +
 htdocs/policy.php                |  1 +
 htdocs/projects.php              |  1 +
 htdocs/terms.php                 |  1 +
 10 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 htdocs/assets/js/tippy-config.js

diff --git a/htdocs/assets/_integrate.php b/htdocs/assets/_integrate.php
index d9ffb47..255ced0 100644
--- a/htdocs/assets/_integrate.php
+++ b/htdocs/assets/_integrate.php
@@ -3,8 +3,11 @@
 <link href="https://fonts.googleapis.com/css2?family=Cormorant+Upright&family=Lexend+Deca:wght@100;300;400&family=Poppins&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="assets/style.css">
 <link rel="stylesheet" href="assets/extra-style.css">
+<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/shift-away.css">
 <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js" integrity="sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbPIDQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
 <script src="https://cdn.lordicon.com/lordicon-1.2.0.js"></script>
-<script src="https://www.google.com/recaptcha/api.js" async defer></script>
\ No newline at end of file
+<script src="https://www.google.com/recaptcha/api.js" async defer></script>
+<script src="https://unpkg.com/@popperjs/core@2"></script>
+<script src="https://unpkg.com/tippy.js@6"></script>
\ No newline at end of file
diff --git a/htdocs/assets/extra-style.css b/htdocs/assets/extra-style.css
index f1511a8..31637c9 100644
--- a/htdocs/assets/extra-style.css
+++ b/htdocs/assets/extra-style.css
@@ -271,4 +271,24 @@ background: #38BDF8;
         opacity: 1;
     }
     }
+}
+
+/* --- Tooltip Styling --- */
+
+.tippy-box[data-theme~='neosubhamoy'] {
+    background-color: #1b2536;
+    color: #FFFFFF;
+}
+
+.tippy-box[data-theme~='neosubhamoy'][data-placement^='top'] > .tippy-arrow::before {
+    border-top-color: #1b2536;
+}
+.tippy-box[data-theme~='neosubhamoy'][data-placement^='bottom'] > .tippy-arrow::before {
+    border-bottom-color: #1b2536;
+}
+.tippy-box[data-theme~='neosubhamoy'][data-placement^='left'] > .tippy-arrow::before {
+    border-left-color: #1b2536;
+}
+.tippy-box[data-theme~='neosubhamoy'][data-placement^='right'] > .tippy-arrow::before {
+    border-right-color: #1b2536;
 }
\ No newline at end of file
diff --git a/htdocs/assets/js/tippy-config.js b/htdocs/assets/js/tippy-config.js
new file mode 100644
index 0000000..6610113
--- /dev/null
+++ b/htdocs/assets/js/tippy-config.js
@@ -0,0 +1,36 @@
+//--- controls tooltips and popover elements
+
+tippy('#searchbar', {
+  content: "ALT + K",
+  theme: 'neosubhamoy',
+  animation: 'shift-away',
+  delay: 500,
+  touch: false
+});
+
+tippy('#sharebutton', {
+  content: "ALT + L",
+  theme: 'neosubhamoy',
+  animation: 'shift-away',
+  delay: 500,
+  touch: false
+});
+
+tippy('#closebutton', {
+  content: "ESC",
+  placement: 'right',
+  theme: 'neosubhamoy',
+  animation: 'shift-away',
+  delay: 500,
+  touch: false
+});
+
+tippy('#shareclosebutton', {
+  content: "ESC",
+  placement: 'right',
+  theme: 'neosubhamoy',
+  animation: 'shift-away',
+  delay: 500,
+  touch: false
+});
+
diff --git a/htdocs/blog.php b/htdocs/blog.php
index 9e69093..5de71d7 100644
--- a/htdocs/blog.php
+++ b/htdocs/blog.php
@@ -34,5 +34,6 @@ require 'core/query_functions.php';
     <script type="text/javascript" src="assets/js/preloader-config.js"></script>
     <script type="text/javascript" src="assets/js/floatingbar-config.js"></script>
     <script type="text/javascript" src="assets/js/keybinding-config.js"></script>
+    <script type="text/javascript" src="assets/js/tippy-config.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/htdocs/contact.php b/htdocs/contact.php
index 30b064a..ecee9f7 100644
--- a/htdocs/contact.php
+++ b/htdocs/contact.php
@@ -116,6 +116,7 @@ require 'core/query_functions.php';
     <script type="text/javascript" src="assets/js/preloader-config.js"></script>
     <script type="text/javascript" src="assets/js/floatingbar-config.js"></script>
     <script type="text/javascript" src="assets/js/keybinding-config.js"></script>
+    <script type="text/javascript" src="assets/js/tippy-config.js"></script>
     <script type="text/javascript" src="assets/js/core-animation.js"></script>
     <script type="text/javascript" src="assets/js/contactform-config.js"></script>
 </body>
diff --git a/htdocs/dmca.php b/htdocs/dmca.php
index c377a3b..1e3e623 100644
--- a/htdocs/dmca.php
+++ b/htdocs/dmca.php
@@ -62,5 +62,6 @@ require 'core/query_functions.php';
     <script type="text/javascript" src="assets/js/preloader-config.js"></script>
     <script type="text/javascript" src="assets/js/floatingbar-config.js"></script>
     <script type="text/javascript" src="assets/js/keybinding-config.js"></script>
+    <script type="text/javascript" src="assets/js/tippy-config.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/htdocs/home.php b/htdocs/home.php
index d547818..bad2e7e 100644
--- a/htdocs/home.php
+++ b/htdocs/home.php
@@ -224,6 +224,7 @@ require 'core/query_functions.php';
     <script type="text/javascript" src="assets/js/preloader-config.js"></script>
     <script type="text/javascript" src="assets/js/floatingbar-config.js"></script>
     <script type="text/javascript" src="assets/js/keybinding-config.js"></script>
+    <script type="text/javascript" src="assets/js/tippy-config.js"></script>
     <script type="text/javascript" src="assets/js/core-animation.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/htdocs/policy.php b/htdocs/policy.php
index d505ff5..39a75df 100644
--- a/htdocs/policy.php
+++ b/htdocs/policy.php
@@ -277,5 +277,6 @@ require 'core/query_functions.php';
     <script type="text/javascript" src="assets/js/preloader-config.js"></script>
     <script type="text/javascript" src="assets/js/floatingbar-config.js"></script>
     <script type="text/javascript" src="assets/js/keybinding-config.js"></script>
+    <script type="text/javascript" src="assets/js/tippy-config.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/htdocs/projects.php b/htdocs/projects.php
index db8561b..830cb09 100644
--- a/htdocs/projects.php
+++ b/htdocs/projects.php
@@ -191,5 +191,6 @@ $years = create_project_years_array($conn);
     <script type="text/javascript" src="assets/js/preloader-config.js"></script>
     <script type="text/javascript" src="assets/js/floatingbar-config.js"></script>
     <script type="text/javascript" src="assets/js/keybinding-config.js"></script>
+    <script type="text/javascript" src="assets/js/tippy-config.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/htdocs/terms.php b/htdocs/terms.php
index ad24a2b..bd4e8dc 100644
--- a/htdocs/terms.php
+++ b/htdocs/terms.php
@@ -190,5 +190,6 @@ require 'core/query_functions.php';
     <script type="text/javascript" src="assets/js/preloader-config.js"></script>
     <script type="text/javascript" src="assets/js/floatingbar-config.js"></script>
     <script type="text/javascript" src="assets/js/keybinding-config.js"></script>
+    <script type="text/javascript" src="assets/js/tippy-config.js"></script>
 </body>
 </html>
\ No newline at end of file