fix(ui): prevent the tooltip from clipping in overflow containers (#756)

Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: hyoban

app/components/Tooltip/Base.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
+import type { Placement } from '@floating-ui/vue'
+import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
 
 const props = defineProps<{
   /** Tooltip text */
@@ -12,34 +14,39 @@ const props = defineProps<{
   tooltipAttr?: HTMLAttributes
 }>()
 
-const positionClasses: Record<string, string> = {
-  top: 'bottom-full inset-is-1/2 -translate-x-1/2 mb-1',
-  bottom: 'top-full inset-is-0 mt-1',
-  left: 'inset-ie-full top-1/2 -translate-y-1/2 me-2',
-  right: 'inset-is-full top-1/2 -translate-y-1/2 ms-2',
-}
+const triggerRef = useTemplateRef('triggerRef')
+const tooltipRef = useTemplateRef('tooltipRef')
 
-const tooltipPosition = computed(() => positionClasses[props.position || 'bottom'])
+const placement = computed<Placement>(() => props.position || 'bottom')
+
+const { floatingStyles } = useFloating(triggerRef, tooltipRef, {
+  placement,
+  whileElementsMounted: autoUpdate,
+  middleware: [offset(4), flip(), shift({ padding: 8 })],
+})
 </script>
 
 <template>
-  <div class="relative inline-flex">
+  <div ref="triggerRef" class="inline-flex">
     <slot />
 
-    <Transition
-      enter-active-class="transition-opacity duration-150 motion-reduce:transition-none"
-      leave-active-class="transition-opacity duration-100 motion-reduce:transition-none"
-      enter-from-class="opacity-0"
-      leave-to-class="opacity-0"
-    >
-      <div
-        v-if="props.isVisible"
-        class="absolute px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-nowrap z-[100] pointer-events-none"
-        :class="tooltipPosition"
-        v-bind="tooltipAttr"
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition-opacity duration-150 motion-reduce:transition-none"
+        leave-active-class="transition-opacity duration-100 motion-reduce:transition-none"
+        enter-from-class="opacity-0"
+        leave-to-class="opacity-0"
       >
-        {{ text }}
-      </div>
-    </Transition>
+        <div
+          v-if="props.isVisible"
+          ref="tooltipRef"
+          class="px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-nowrap z-[100] pointer-events-none"
+          :style="floatingStyles"
+          v-bind="tooltipAttr"
+        >
+          {{ text }}
+        </div>
+      </Transition>
+    </Teleport>
   </div>
 </template>

package.json

@@ -40,6 +40,7 @@
     "@atproto/lex": "0.0.13",
     "@atproto/oauth-client-node": "^0.3.15",
     "@deno/doc": "jsr:^0.189.1",
+    "@floating-ui/vue": "1.1.10",
     "@iconify-json/carbon": "1.2.18",
     "@iconify-json/lucide": "1.2.87",
     "@iconify-json/simple-icons": "1.2.68",