From 8c7cc1f316e14641e85dd4efde065a5cb582969f Mon Sep 17 00:00:00 2001
From: grimhilt <grimhilt@users.noreply.github.com>
Date: Sat, 15 Apr 2023 17:44:08 +0200
Subject: [PATCH] create tooltip

---
 front/package-lock.json         |  1 +
 front/package.json              |  1 +
 front/src/components/Tooltip.ts | 41 +++++++++++++++++++++++++++++++++
 front/src/main.ts               |  3 ++-
 front/yarn.lock                 |  2 +-
 5 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 front/src/components/Tooltip.ts

diff --git a/front/package-lock.json b/front/package-lock.json
index 27b32c4..c2e7bf1 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -8,6 +8,7 @@
       "name": "mail",
       "version": "0.1.0",
       "dependencies": {
+        "@popperjs/core": "^2.11.7",
         "@tiptap/extension-bold": "^2.0.3",
         "@tiptap/extension-bullet-list": "^2.0.3",
         "@tiptap/extension-hard-break": "^2.0.3",
diff --git a/front/package.json b/front/package.json
index 475a5b3..d7a3fca 100644
--- a/front/package.json
+++ b/front/package.json
@@ -9,6 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@popperjs/core": "^2.11.7",
     "@tiptap/extension-bold": "^2.0.3",
     "@tiptap/extension-bullet-list": "^2.0.3",
     "@tiptap/extension-hard-break": "^2.0.3",
diff --git a/front/src/components/Tooltip.ts b/front/src/components/Tooltip.ts
new file mode 100644
index 0000000..c5322d6
--- /dev/null
+++ b/front/src/components/Tooltip.ts
@@ -0,0 +1,41 @@
+import { DirectiveBinding, ObjectDirective, VNode } from "vue";
+import { createPopper } from "@popperjs/core";
+
+const VTooltip: ObjectDirective = {
+    mounted(el: HTMLElement, binding: DirectiveBinding<any>) {
+        const tooltipText = binding.value;
+        const tooltip = document.createElement("div");
+        tooltip.innerText = tooltipText;
+        el.appendChild(tooltip);
+        tooltip.style.display = "none";
+
+        const popper = createPopper(el, tooltip, {
+            placement: "top",
+            modifiers: [
+                {
+                    name: "offset",
+                    options: {
+                        offset: [0, 8],
+                    },
+                },
+            ],
+        });
+
+        el.addEventListener("mouseenter", () => {
+            tooltip.style.display = "block";
+        });
+
+        el.addEventListener("mouseleave", () => {
+            tooltip.style.display = "none";
+        });
+    },
+
+    unmounted(el: HTMLElement) {
+        const tooltip = el.querySelector(".tooltip");
+        if (tooltip) {
+            el.removeChild(tooltip);
+        }
+    },
+};
+
+export default VTooltip;
diff --git a/front/src/main.ts b/front/src/main.ts
index 7684bf5..1527abb 100644
--- a/front/src/main.ts
+++ b/front/src/main.ts
@@ -3,9 +3,10 @@ import router from "./router";
 import App from "./App.vue";
 import store from "./store/store";
 import "@/assets/css/main.css";
+import VTooltip from "./components/Tooltip";
 
 const app = createApp(App);
 app.use(router);
 app.use(store);
-
+app.directive("tooltip", VTooltip);
 app.mount("#app");
diff --git a/front/yarn.lock b/front/yarn.lock
index 80ddef9..f8635a7 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -1396,7 +1396,7 @@
   resolved "https://registry.npmmirror.com/@polka/url/-/url-1.0.0-next.21.tgz"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
-"@popperjs/core@^2.9.0":
+"@popperjs/core@^2.11.7", "@popperjs/core@^2.9.0":
   version "2.11.7"
   resolved "https://repo.plus4u.net/operatorGate/repository/public-javascript/@popperjs/core/-/core-2.11.7.tgz"
   integrity sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==