create tooltip

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