diff --git a/src/assets/scss/Global/basic.scss b/src/assets/scss/Global/basic.scss
index c05f258..67f0ec6 100644
--- a/src/assets/scss/Global/basic.scss
+++ b/src/assets/scss/Global/basic.scss
@@ -117,7 +117,12 @@ button {
   border-radius: $smaller;
   padding: $smaller;
   font-size: 0.85rem;
-  display: none;
+  visibility: hidden;
   position: absolute;
   z-index: 300;
 }
+
+#tooltip[data-popper-reference-hidden] {
+  visibility: hidden !important;
+  pointer-events: none;
+}
diff --git a/src/directives/vTooltip.ts b/src/directives/vTooltip.ts
index adc3ec9..d67d098 100644
--- a/src/directives/vTooltip.ts
+++ b/src/directives/vTooltip.ts
@@ -14,7 +14,7 @@ export default {
       setTimeout(() => {
         if (isHovered) {
           tooltip.innerText = binding.value;
-          tooltip.style.display = "unset";
+          tooltip.style.visibility = "visible";
 
           createPopper(el, tooltip, {
             placement: "top",
@@ -25,6 +25,10 @@ export default {
                   offset: [0, 10],
                 },
               },
+              {
+                name: "hide",
+                enabled: true,
+              },
             ],
           });
         }
@@ -33,14 +37,15 @@ export default {
 
     el.addEventListener("mouseout", () => {
       isHovered = false;
-      tooltip.style.display = "none";
+      tooltip.style.visibility = "hidden";
     });
   },
   beforeUnmount(el: HTMLElement) {
     const tooltip = document.getElementById("tooltip") as HTMLElement;
-    tooltip.style.display = "none";
+    tooltip.style.visibility = "hidden";
 
     el.removeEventListener("mouseover", () => {});
     el.removeEventListener("mouseout", () => {});
+    
   },
 } as Directive;