From 8d1271834d9ca7187076db3d1ca0a0a21e1ef01b Mon Sep 17 00:00:00 2001
From: LeoTiTo <lochuutran12@gmail.com>
Date: Wed, 4 Jun 2025 15:09:36 +0200
Subject: [PATCH] feat: enhance ATooltip component with dynamic positioning and
 noWrap option

---
 components/ATooltip.vue | 103 ++++++++++++++++++++++++----------------
 1 file changed, 61 insertions(+), 42 deletions(-)

diff --git a/components/ATooltip.vue b/components/ATooltip.vue
index 87ca762..fb46cd4 100644
--- a/components/ATooltip.vue
+++ b/components/ATooltip.vue
@@ -1,34 +1,71 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
 interface ATooltipProps {
   content: string;
   position?: "top" | "right" | "bottom" | "left";
   color?: "default" | "danger";
+  noWrap?: boolean;
 }
 
 const props = withDefaults(defineProps<ATooltipProps>(), {
   position: "top",
   color: "default",
+  noWrap: false,
 });
 
 const tooltipVisible = ref(false);
+const tooltipTarget = ref<HTMLElement | null>(null);
+const tooltipStyle = computed(() => {
+  if (!tooltipTarget.value || !tooltipVisible.value) return {};
+
+  const targetRect = tooltipTarget.value.getBoundingClientRect();
+  const style: any = { zIndex: 99999 };
+
+  switch (props.position) {
+    case "top":
+      style.bottom = `${window.innerHeight - targetRect.top + 5}px`;
+      style.left = `${targetRect.left + targetRect.width / 2}px`;
+      style.transform = 'translateX(-50%)';
+      break;
+    case "bottom":
+      style.top = `${targetRect.bottom + 5}px`;
+      style.left = `${targetRect.left + targetRect.width / 2}px`;
+      style.transform = 'translateX(-50%)';
+      break;
+    case "left":
+      style.top = `${targetRect.top + targetRect.height / 2}px`;
+      style.right = `${window.innerWidth - targetRect.left + 5}px`;
+      style.transform = 'translateY(-50%)';
+      break;
+    case "right":
+      style.top = `${targetRect.top + targetRect.height / 2}px`;
+      style.left = `${targetRect.right + 5}px`;
+      style.transform = 'translateY(-50%)';
+      break;
+  }
+  return style;
+});
+
 </script>
 
 <template>
   <div class="a-tooltip-container">
     <div
+      ref="tooltipTarget"
       class="tooltip-target"
       @mouseenter="tooltipVisible = true"
       @mouseleave="tooltipVisible = false"
     >
       <slot></slot>
     </div>
-    <transition name="fade-fast">
-      <div v-if="tooltipVisible" class="tooltip" :class="position, color">
-        {{ content }}
-      </div>
-    </transition>
+    <teleport to="body">
+      <transition name="fade-fast">
+        <div v-if="tooltipVisible" class="tooltip" :class="{ 'no-wrap': noWrap, 'danger': color === 'danger' }" :style="tooltipStyle">
+          {{ content }}
+        </div>
+      </transition>
+    </teleport>
   </div>
 </template>
 
@@ -36,46 +73,28 @@ const tooltipVisible = ref(false);
 .a-tooltip-container {
   position: relative;
   width: fit-content;
+  display: inline-block; 
+}
 
-  .tooltip {
-    position: absolute;
-    z-index: 1000;
-    background-color: var(--a-black);
-    color: var(--a-white);
-    padding: 10px;
-    border-radius: 5px;
-    font-size: 14px;
-    pointer-events: none;
-
-    &.top {
-      bottom: calc(100% + 5px);
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    &.right {
-      top: 50%;
-      left: calc(100% + 5px);
-      transform: translateY(-50%);
-    }
+.tooltip {
+  position: fixed; 
+  z-index: 99999; 
+  background-color: var(--a-black); 
+  color: var(--a-white);
+  padding: 10px;
+  border-radius: 5px;
+  font-size: 14px;
+  pointer-events: none;
 
-    &.bottom {
-      top: calc(100% + 5px);
-      left: 50%;
-      transform: translateX(-50%);
-    }
+  &.danger {
+    border: 0.5px solid var(--a-danger);
+    background: var(--a-danger-lightest);
+    color: var(--a-danger);
+  }
 
-    &.left {
-      top: 50%;
-      right: calc(100% + 5px);
-      transform: translateY(-50%);
-    }
+  &.no-wrap {
+    white-space: nowrap;
   }
-  .danger {
-      border: 0.5px solid var(--a-danger);
-      background: var(--a-danger-lightest);
-      color: var(--a-danger);
-    }
 }
 
 </style>