fix: wrap tooltip in Teleport component for improved rendering

Author: yaroslav8765

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>