From ed136dd3ec075879a99a574b497e7ef9540b199a Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Mon, 13 Oct 2025 09:53:27 +0300
Subject: [PATCH 1/2] fix: teleport tooltip to body

---
 adminforth/spa/src/afcl/Tooltip.vue | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/adminforth/spa/src/afcl/Tooltip.vue b/adminforth/spa/src/afcl/Tooltip.vue
index 1a3b83c6..4bb20bcc 100644
--- a/adminforth/spa/src/afcl/Tooltip.vue
+++ b/adminforth/spa/src/afcl/Tooltip.vue
@@ -2,14 +2,16 @@
   <div ref="triggerEl" class="afcl-tooltip inline-flex items-center">
       <slot></slot>
   </div>
-  <div
-    role="tooltip"
-    class="absolute z-20 invisible inline-block px-3 py-2 text-sm font-medium text-lightTooltipText dark:darkTooltipText transition-opacity duration-300 bg-lightTooltipBackground rounded-lg shadow-sm opacity-0 tooltip dark:bg-darkTooltipBackground"
-    ref="tooltip"
-  >
-    <slot name="tooltip"></slot>
-    <div class="tooltip-arrow" data-popper-arrow></div>
-  </div>
+  <teleport to="body">
+    <div
+      role="tooltip"
+      class="absolute z-20 invisible inline-block px-3 py-2 text-sm font-medium text-lightTooltipText dark:darkTooltipText transition-opacity duration-300 bg-lightTooltipBackground rounded-lg shadow-sm opacity-0 tooltip dark:bg-darkTooltipBackground"
+      ref="tooltip"
+    >
+      <slot name="tooltip"></slot>
+      <div class="tooltip-arrow" data-popper-arrow></div>
+    </div>
+  </teleport>
 </template>
 
 <script setup lang="ts">

From 94af857feceda07e4fa379a8c0a37fc13d1ffbfb Mon Sep 17 00:00:00 2001
From: yaroslav8765 <pechorkin2014@gmail.com>
Date: Mon, 13 Oct 2025 17:50:57 +0300
Subject: [PATCH 2/2] fix: remove tooltip from DOM when its hidden

---
 adminforth/spa/src/afcl/Tooltip.vue | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/adminforth/spa/src/afcl/Tooltip.vue b/adminforth/spa/src/afcl/Tooltip.vue
index 4bb20bcc..515efde3 100644
--- a/adminforth/spa/src/afcl/Tooltip.vue
+++ b/adminforth/spa/src/afcl/Tooltip.vue
@@ -1,8 +1,8 @@
 <template>
-  <div ref="triggerEl" class="afcl-tooltip inline-flex items-center">
+  <div ref="triggerEl" class="afcl-tooltip inline-flex items-center" @mouseenter="mouseOn" @mouseleave="mouseOff">
       <slot></slot>
   </div>
-  <teleport to="body">
+  <teleport to="body" v-if="showTooltip">
     <div
       role="tooltip"
       class="absolute z-20 invisible inline-block px-3 py-2 text-sm font-medium text-lightTooltipText dark:darkTooltipText transition-opacity duration-300 bg-lightTooltipBackground rounded-lg shadow-sm opacity-0 tooltip dark:bg-darkTooltipBackground"
@@ -15,17 +15,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, nextTick, onUnmounted, type Ref } from 'vue';
+import { ref, nextTick, type Ref } from 'vue';
 import { Tooltip } from 'flowbite';
 
 const triggerEl = ref(null);
 const tooltip = ref(null);
-
+const showTooltip = ref(false);
 const tp: Ref<Tooltip|null> = ref(null);
 
-onMounted(async () => {
-  //await one tick when all is mounted
+async function mouseOn() {
+  showTooltip.value = true;
   await nextTick();
+
+  tp.value?.destroy();
+
   tp.value = new Tooltip(
     tooltip.value,
     triggerEl.value,
@@ -34,11 +37,15 @@ onMounted(async () => {
       triggerType: 'hover',
     },
   );
-})
 
+  tp.value.show();
+}
 
-onUnmounted(() => {
-  //destroy tooltip
+function mouseOff() {
+  tp.value?.hide();
   tp.value?.destroy();
-})
+  tp.value = null;
+  showTooltip.value = false;
+}
+
 </script>
\ No newline at end of file