Flip tooltips

src/components/Tooltip.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import { vElementHover } from '@vueuse/components';
-import { useVModel } from '@vueuse/core';
-
-interface Props {
-    open: boolean;
-}
-
-interface Emit {
-    (e: 'update:open', value: boolean): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    open: false,
-});
-const emit = defineEmits<Emit>();
-
-const isOpen = useVModel(props, 'open', emit, {passive: true});
-
-</script>
-
-<template>
-    <div clas="flex flex-col items-center justify-center" :class="{'open': isOpen}">
-        <div v-element-hover="(h: boolean) => isOpen = h" class="m-auto header">
-            <slot name="header" />
-        </div>
-        <div v-if="isOpen" class="m-auto">
-            <div class="z-10 relative">
-                <div class="absolute">
-                    <slot />
-                </div>
-            </div>
-        </div>
-    </div>
-</template>

src/components/index.ts

@@ -3,5 +3,5 @@ export { default as Dropdown } from './Dropdown.vue';
 export { default as LoadingSpinner } from './LoadingSpinner.vue';
 export { default as Modal } from './Modal.vue';
 export { default as SliderCheckbox } from './SliderCheckbox.vue';
-export { default as Tooltip } from './Tooltip.vue';
+export { default as Tooltip } from './tooltip/Tooltip.vue';
 

src/components/tooltip/Tooltip.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { vElementHover } from '@vueuse/components';
+import { useElementBounding, useVModel } from '@vueuse/core';
+import { computed, ref } from 'vue';
+import { useSharedWindowSize } from './tooltip';
+
+interface Props {
+    open: boolean;
+}
+
+interface Emit {
+    (e: 'update:open', value: boolean): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    open: false,
+});
+const emit = defineEmits<Emit>();
+
+const isOpen = useVModel(props, 'open', emit, {passive: true});
+
+const { width, height } = useSharedWindowSize();
+const mainDiv = ref<HTMLDivElement | null>(null);
+const { top, left } = useElementBounding(mainDiv);
+
+const positions = computed(() => {
+    if (top.value < height.value / 2) {
+        if (left.value < width.value / 2) {
+            return ['top', 'left'];
+        }
+        return ['top', 'right'];
+    }
+    if (left.value < width.value / 2) {
+        return ['bottom', 'left'];
+    }
+    return ['bottom', 'right'];
+})
+</script>
+
+<template>
+    <div ref="mainDiv" clas="flex flex-col items-center justify-center" :class="{
+        'open': isOpen,
+        'tooltip-top': positions.includes('top'),
+        'tooltip-bottom': positions.includes('bottom'),
+        'tooltip-left': positions.includes('left'),
+        'tooltip-right': positions.includes('right')
+    }">
+        <div v-element-hover="(h: boolean) => isOpen = h" class="m-auto header">
+            <slot name="header" />
+        </div>
+        <div v-if="isOpen" class="m-auto">
+            <div class="z-10 relative">
+                <div class="absolute">
+                    <slot />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

src/components/tooltip/tooltip.ts

@@ -0,0 +1,3 @@
+import { createSharedComposable, useWindowSize } from "@vueuse/core";
+
+export const useSharedWindowSize = createSharedComposable(useWindowSize);

src/market/acquisition/AcquisitionQuantilsTooltip.vue

@@ -52,7 +52,7 @@ watchEffect(async () => {
             <ArrowTrendingDownIcon v-else />
         </template>
         <template #default>
-            <div class="bg-slate-500 -left-1/2 relative" v-if="history.length > 0">
+            <div class="bg-slate-500 -left-1/2 relative tooltip-content" v-if="history.length > 0">
                 <table>
                     <thead>
                         <tr>
@@ -80,8 +80,18 @@ watchEffect(async () => {
     >:deep(div.header) {
         @apply btn-icon px-2;
     }
-    &.open>:deep(div.header) {
+    &.open {
+        &.tooltip-top>:deep(div.header) {
             @apply rounded-t-md bg-slate-600;
         }
+        &.tooltip-bottom {
+            .tooltip-content {
+                bottom: 79px
+            }
+            >:deep(div.header) {
+                @apply rounded-b-md bg-slate-600;
+            }
+        }
+    }
 }
 </style>