create tooltip

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",

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",

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;

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");

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==