diff --git a/app/components/Tooltip/Base.vue b/app/components/Tooltip/Base.vue
index 68656d07de..aa8ed5858e 100644
--- a/app/components/Tooltip/Base.vue
+++ b/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>
diff --git a/package.json b/package.json
index 78df4fd9ed..1e47afda22 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c38877bea2..a2a4848fde 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,6 +32,9 @@ importers:
       '@deno/doc':
         specifier: jsr:^0.189.1
         version: '@jsr/deno__doc@0.189.1(patch_hash=24f326e123c822a07976329a5afe91a8713e82d53134b5586625b72431c87832)'
+      '@floating-ui/vue':
+        specifier: 1.1.10
+        version: 1.1.10(vue@3.5.27(typescript@5.9.3))
       '@iconify-json/carbon':
         specifier: 1.2.18
         version: 1.2.18