feat: added a custom tooltip

wajeht · Jul 4, 2022 · e781129 · e781129
1 parent 837e5ec
commit e781129
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 4 deletions.
diff --git a/src/apps/ui/components/shared/Login.vue b/src/apps/ui/components/shared/Login.vue
@@ -69,12 +69,22 @@
   <!-- o-auth -->
   <div class="d-flex flex-column gap-2 mb-3">
     <!-- discord -->
-    <a class="btn w-100 text-light" href="#" style="background: #7289da"
+    <a
+      class="btn w-100 text-light"
+      href="#"
+      style="background: #7289da"
+      v-tooltip
+      title="Not supported yet!"
       ><i class="bi bi-discord me-1"></i>Login with Discord</a
     >
 
     <!-- github -->
-    <a class="btn btn-success w-100" style="border: 1px solid #ced4da" href="#"
+    <a
+      class="btn btn-success w-100"
+      style="border: 1px solid #ced4da"
+      href="#"
+      v-tooltip
+      title="Not supported yet!"
       ><i class="bi bi-github me-1"></i>Login with Github</a
     >
 

diff --git a/src/apps/ui/components/shared/Signup.vue b/src/apps/ui/components/shared/Signup.vue
@@ -80,12 +80,22 @@
   <!-- o-auth -->
   <div class="d-flex flex-column gap-2 mb-3">
     <!-- discord -->
-    <a class="btn w-100 text-light" href="#" style="background: #7289da"
+    <a
+      class="btn w-100 text-light"
+      href="#"
+      style="background: #7289da"
+      v-tooltip
+      title="Not supported yet!"
       ><i class="bi bi-discord me-1"></i>Login with Discord</a
     >
 
     <!-- github -->
-    <a class="btn btn-success w-100" style="border: 1px solid #ced4da" href="#"
+    <a
+      class="btn btn-success w-100"
+      style="border: 1px solid #ced4da"
+      href="#"
+      v-tooltip
+      title="Not supported yet!"
       ><i class="bi bi-github me-1"></i>Login with Github</a
     >
 

diff --git a/src/apps/ui/main.vue.js b/src/apps/ui/main.vue.js
@@ -12,6 +12,7 @@ import 'hover.css';
 import AOS from 'aos';
 import 'aos/dist/aos.css';
 import FontAwesomeIcon from './font-awesome';
+import { tooltip } from './tool-tip.js';
 import { Chart, registerables } from 'chart.js';
 
 import VueAnimXyz from '@animxyz/vue3';
@@ -27,6 +28,8 @@ app.component('font-awesome-icon', FontAwesomeIcon);
 app.config.performance = true;
 app.config.devtools = true;
 
+app.directive('tooltip', tooltip);
+
 app.use(VueAnimXyz);
 app.use(routes);
 

diff --git a/src/apps/ui/tool-tip.js b/src/apps/ui/tool-tip.js
@@ -0,0 +1,9 @@
+import { Tooltip } from 'bootstrap';
+
+export const tooltip = {
+  mounted(el) {
+    const tooltip = new Tooltip(el);
+  },
+};
+
+// https://stackoverflow.com/questions/69053972/adding-bootstrap-5-tooltip-to-vue-3