fix(#2): Tooltip popup is clipped/hidden behind table content

src/components/tooltip/Tooltip.vue

@@ -8,20 +8,27 @@ const open = defineModel('open', { default: false });
 
 const { width, height } = useSharedWindowSize();
 const mainDiv = ref<HTMLDivElement | null>(null);
-const { top, left } = useElementBounding(mainDiv);
+const { top, bottom, left, right } = useElementBounding(mainDiv);
 
-const positions = computed(() => {
+const positions = computed(() => [
-    if (top.value < height.value / 2) {
+    top.value < height.value / 2 ? 'top' : 'bottom',
-        if (left.value < width.value / 2) {
+    left.value < width.value / 2 ? 'left' : 'right',
-            return ['top', 'left'];
+]);
-        }
+
-        return ['top', 'right'];
+const floatingStyle = computed(() => {
+    const style: Record<string, string> = {};
+    if (positions.value.includes('top')) {
+        style.top = `${bottom.value}px`;
+    } else {
+        style.bottom = `${height.value - top.value}px`;
     }
-    if (left.value < width.value / 2) {
+    if (positions.value.includes('left')) {
-        return ['bottom', 'left'];
+        style.left = `${left.value}px`;
+    } else {
+        style.right = `${width.value - right.value}px`;
     }
-    return ['bottom', 'right'];
+    return style;
-})
+});
 </script>
 
 <template>
@@ -35,12 +42,18 @@ const positions = computed(() => {
         <div v-element-hover="(h: boolean) => open = h" class="m-auto header">
             <slot name="header" />
         </div>
-        <div v-if="open" class="m-auto">
+        <Teleport to="body">
-            <div class="z-10 relative">
+            <div v-if="open" class="tooltip-floating" :style="floatingStyle">
-                <div class="absolute">
+                <slot />
-                    <slot />
-                </div>
             </div>
-        </div>
+        </Teleport>
     </div>
 </template>
+
+<style scoped>
+@reference "@/style.css";
+
+.tooltip-floating {
+    @apply fixed z-30;
+}
+</style>

src/market/acquisition/AcquisitionQuartilesTooltip.vue

@@ -43,7 +43,7 @@ const lineColor = computed(() => {
             <MarketTrendIcon v-else :trend="quartiles.trend" />
         </template>
         <template #default>
-            <div class="bg-slate-500 -left-1/2 relative tooltip-content" v-if="quartiles">
+            <div class="bg-slate-500 tooltip-content" v-if="quartiles">
                 <table>
                     <thead>
                         <tr>
@@ -74,9 +74,6 @@ const lineColor = computed(() => {
         &.tooltip-top>:deep(div.header) {
             @apply rounded-t-md bg-slate-600;
         }
-        &.tooltip-bottom .tooltip-content {
-            bottom: 75px;
-        }
         &.tooltip-bottom>:deep(div.header) {
             @apply rounded-b-md bg-slate-600;
         }