diff --git a/packages/super-editor/src/editors/v1/components/toolbar/FontFamilyCombobox.vue b/packages/super-editor/src/editors/v1/components/toolbar/FontFamilyCombobox.vue
index 81049236d2..48aeefc75c 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/FontFamilyCombobox.vue
+++ b/packages/super-editor/src/editors/v1/components/toolbar/FontFamilyCombobox.vue
@@ -3,6 +3,7 @@ import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
 import { toolbarIcons } from './toolbarIcons.js';
 import { useHighContrastMode } from '../../composables/use-high-contrast-mode';
 import { computeTypeahead, findPrefixMatchIndex, normalizeCustomFontFamily } from './font-typeahead.js';
+import { getAnchoredPosition, getAvailableSpaceForPlacement } from '../../utils/anchored-position.js';
 
 const props = defineProps({
   item: {
@@ -95,20 +96,12 @@ const updatePosition = () => {
   if (!trigger) return;
   const rect = trigger.getBoundingClientRect();
   const menuEl = popupRef.value;
-  const menuHeight = menuEl?.scrollHeight ?? menuEl?.offsetHeight ?? 0;
-  const viewportHeight = window.innerHeight || document.documentElement.clientHeight || 0;
-  const viewportWidth = window.innerWidth || document.documentElement.clientWidth || 0;
-  const gutter = 8;
   const gap = 4;
-  const belowTop = rect.bottom + gap;
-  const aboveBottom = rect.top - gap;
-  const availableBelow = Math.max(0, viewportHeight - belowTop - gutter);
-  const availableAbove = Math.max(0, aboveBottom - gutter);
-  const openAbove = availableBelow < menuHeight && availableAbove > availableBelow;
-  const maxHeight = openAbove ? availableAbove : availableBelow;
-  const renderHeight = menuHeight ? Math.min(menuHeight, maxHeight) : maxHeight;
-  const top = openAbove ? Math.max(gutter, aboveBottom - renderHeight) : belowTop;
-  const left = Math.min(Math.max(gutter, rect.left), Math.max(gutter, viewportWidth - rect.width - gutter));
+  const { top, left, computedPlacement } = getAnchoredPosition(trigger, menuEl, {
+    placement: 'bottom-start',
+    offset: gap,
+  });
+  const { maxHeight } = getAvailableSpaceForPlacement(trigger, computedPlacement, gap);
 
   menuPosition.value = {
     top: `${top}px`,
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/SdTooltip.test.js b/packages/super-editor/src/editors/v1/components/toolbar/SdTooltip.test.js
index 395c2669cf..77c6b9fc7f 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/SdTooltip.test.js
+++ b/packages/super-editor/src/editors/v1/components/toolbar/SdTooltip.test.js
@@ -36,4 +36,45 @@ describe('SdTooltip', () => {
     await nextTick();
     expect(document.body.querySelector('.sd-tooltip-content')).toBeNull();
   });
+
+  it('flips to bottom placement when there is not enough space above the trigger', async () => {
+    // Trigger at top=20, bottom=40 in a 768px tall viewport.
+    // offset=10, GUTTER=8 → availableAbove = max(0, 20 - 10 - 8) = 2
+    // availableBelow = max(0, 768 - 40 - 10 - 8) = 710
+    // contentHeight=60 > availableAbove=2, so the tooltip must flip to 'bottom'.
+    Object.defineProperty(window, 'innerHeight', { value: 768, configurable: true });
+    Object.defineProperty(window, 'innerWidth', { value: 1024, configurable: true });
+
+    // happy-dom does not compute layout; mock geometry so the flip condition and position check fire.
+    vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockImplementation(function () {
+      return this.classList.contains('sd-tooltip-content') ? 60 : 0;
+    });
+
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function () {
+      if (this.classList.contains('sd-tooltip-trigger')) {
+        return { top: 20, bottom: 40, left: 400, right: 420, width: 20, height: 20, x: 400, y: 20, toJSON() {} };
+      }
+      return { top: 0, bottom: 0, left: 0, right: 0, width: 0, height: 0, x: 0, y: 0, toJSON() {} };
+    });
+
+    const wrapper = mount(SdTooltip, {
+      attachTo: document.body,
+      props: { delay: 0, duration: 0 },
+      slots: {
+        trigger: '<button type="button">Hover me</button>',
+        default: 'Tooltip text',
+      },
+    });
+
+    await wrapper.find('.sd-tooltip-trigger').trigger('mouseenter');
+    await nextTick();
+
+    const arrowEl = document.body.querySelector('.sd-tooltip-arrow');
+    expect(arrowEl).not.toBeNull();
+    expect(arrowEl.classList.contains('sd-tooltip-arrow-bottom')).toBe(true);
+
+    // Tooltip must be positioned below the trigger (not cut off above)
+    const topValue = parseInt(document.body.querySelector('.sd-tooltip-content').style.top, 10);
+    expect(topValue).toBeGreaterThanOrEqual(40);
+  });
 });
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/SdTooltip.vue b/packages/super-editor/src/editors/v1/components/toolbar/SdTooltip.vue
index af44e677b4..c5a9ff04f4 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/SdTooltip.vue
+++ b/packages/super-editor/src/editors/v1/components/toolbar/SdTooltip.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { computed, nextTick, onBeforeUnmount, ref, useAttrs, watch } from 'vue';
+import { getAnchoredPosition } from '../../utils/anchored-position';
 
 defineOptions({
   inheritAttrs: false,
@@ -38,12 +39,17 @@ const isOpen = ref(false);
 const triggerRef = ref(null);
 const contentRef = ref(null);
 const position = ref({ top: '0px', left: '0px' });
+const placement = ref('top');
 
 let closeTimeout = null;
 let openTimeout = null;
 let autoHideTimeout = null;
 
-const mergedContentClass = computed(() => ['sd-tooltip-content', attrs.class]);
+const mergedContentClass = computed(() => [
+  'sd-tooltip-content',
+  `fade-in-scale-up-transition-enter-active-${placement.value}`,
+  attrs.class,
+]);
 const contentStyle = computed(() => ({
   ...props.contentStyle,
   ...(attrs.style || {}),
@@ -86,17 +92,14 @@ const scheduleAutoHide = () => {
 const updatePosition = () => {
   if (!triggerRef.value || !contentRef.value) return;
 
-  const triggerRect = triggerRef.value.getBoundingClientRect();
-  const contentWidth = contentRef.value.offsetWidth;
-  const contentHeight = contentRef.value.offsetHeight;
-  const viewportWidth = window.innerWidth || document.documentElement.clientWidth || 0;
-  const gutter = 8;
-
-  let left = triggerRect.left + triggerRect.width / 2 - contentWidth / 2;
-  left = Math.max(gutter, Math.min(left, viewportWidth - contentWidth - gutter));
+  const { top, left, computedPlacement } = getAnchoredPosition(triggerRef.value, contentRef.value, {
+    placement: 'top',
+    offset: 10,
+  });
 
+  placement.value = computedPlacement;
   position.value = {
-    top: `${triggerRect.top - contentHeight - 10}px`,
+    top: `${top}px`,
     left: `${left}px`,
   };
 };
@@ -221,7 +224,7 @@ onBeforeUnmount(() => {
         @mouseenter="handleContentMouseEnter"
         @mouseleave="handleContentMouseLeave"
       >
-        <span class="sd-tooltip-arrow" aria-hidden="true" />
+        <span :class="`sd-tooltip-arrow sd-tooltip-arrow-${placement}`" aria-hidden="true" />
         <slot />
       </div>
     </Transition>
@@ -248,18 +251,33 @@ onBeforeUnmount(() => {
 .sd-tooltip-arrow {
   position: absolute;
   left: 50%;
-  bottom: -5px;
   width: 10px;
   height: 10px;
   background-color: var(--sd-ui-tooltip-bg, #262626);
   transform: translateX(-50%) rotate(45deg);
 }
 
+.sd-tooltip-arrow-top {
+  bottom: -5px;
+}
+
+.sd-tooltip-arrow-bottom {
+  top: -5px;
+}
+
 .fade-in-scale-up-transition-enter-active,
 .fade-in-scale-up-transition-leave-active {
+  transform-origin: center;
+}
+
+.fade-in-scale-up-transition-enter-active-top {
   transform-origin: bottom center;
 }
 
+.fade-in-scale-up-transition-enter-active-bottom {
+  transform-origin: top center;
+}
+
 .fade-in-scale-up-transition-enter-active {
   transition:
     opacity 0.2s cubic-bezier(0, 0, 0.2, 1),
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/ToolbarDropdown.vue b/packages/super-editor/src/editors/v1/components/toolbar/ToolbarDropdown.vue
index aa27e2c4a5..cfc50f35fa 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/ToolbarDropdown.vue
+++ b/packages/super-editor/src/editors/v1/components/toolbar/ToolbarDropdown.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { computed, defineComponent, nextTick, onBeforeUnmount, ref, watch } from 'vue';
+import { getAnchoredPosition, getAvailableSpaceForPlacement } from '../../utils/anchored-position.js';
 
 const props = defineProps({
   options: {
@@ -89,29 +90,14 @@ const updateMenuPosition = () => {
   if (!triggerRef.value) return;
   const rect = triggerRef.value.getBoundingClientRect();
   const menuEl = menuRef.value;
-  const menuWidth = menuEl?.offsetWidth ?? 0;
-  const menuHeight = menuEl?.scrollHeight ?? menuEl?.offsetHeight ?? 0;
-  const viewportWidth = window.innerWidth || document.documentElement.clientWidth || 0;
-  const viewportHeight = window.innerHeight || document.documentElement.clientHeight || 0;
-  const gutter = 8;
   const gap = 4;
-  const belowTop = rect.bottom + gap;
-  const aboveBottom = rect.top - gap;
-  const availableBelow = Math.max(0, viewportHeight - belowTop - gutter);
-  const availableAbove = Math.max(0, aboveBottom - gutter);
-  const openAbove = availableBelow < menuHeight && availableAbove > availableBelow;
-  const maxHeight = openAbove ? availableAbove : availableBelow;
-  const menuRenderHeight = menuHeight ? Math.min(menuHeight, maxHeight) : maxHeight;
-  const top = openAbove ? Math.max(gutter, aboveBottom - menuRenderHeight) : belowTop;
-  let left = rect.left;
-
-  if (props.placement === 'bottom-end') {
-    left = rect.right - menuWidth;
-  }
 
-  // Prevent horizontal overflow outside viewport.
-  const maxLeft = Math.max(gutter, viewportWidth - menuWidth - gutter);
-  left = Math.min(Math.max(gutter, left), maxLeft);
+  const { top, left, computedPlacement } = getAnchoredPosition(triggerRef.value, menuEl, {
+    placement: props.placement,
+    offset: gap,
+  });
+
+  const { maxHeight } = getAvailableSpaceForPlacement(triggerRef.value, computedPlacement, gap);
 
   menuPosition.value = {
     top: `${top}px`,
diff --git a/packages/super-editor/src/editors/v1/utils/anchored-position.test.ts b/packages/super-editor/src/editors/v1/utils/anchored-position.test.ts
new file mode 100644
index 0000000000..dd58e2de9b
--- /dev/null
+++ b/packages/super-editor/src/editors/v1/utils/anchored-position.test.ts
@@ -0,0 +1,362 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { getAnchoredPosition, getAvailableSpace, getAvailableSpaceForPlacement } from './anchored-position.js';
+
+const GUTTER = 8;
+
+/**
+ * Creates a mock HTMLElement with a fixed bounding rect and optional offsetWidth/offsetHeight.
+ */
+const makeTrigger = (rect: {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+  width: number;
+  height: number;
+}): HTMLElement => {
+  const el = document.createElement('div');
+  vi.spyOn(el, 'getBoundingClientRect').mockReturnValue({
+    ...rect,
+    x: rect.left,
+    y: rect.top,
+    toJSON: () => ({}),
+  } as DOMRect);
+  return el;
+};
+
+const makeContent = (width: number, height: number): HTMLElement => {
+  const el = document.createElement('div');
+  Object.defineProperty(el, 'offsetWidth', { get: () => width, configurable: true });
+  Object.defineProperty(el, 'offsetHeight', { get: () => height, configurable: true });
+  return el;
+};
+
+const setViewport = (width: number, height: number) => {
+  Object.defineProperty(window, 'innerWidth', { value: width, configurable: true, writable: true });
+  Object.defineProperty(window, 'innerHeight', { value: height, configurable: true, writable: true });
+};
+
+describe('getAvailableSpace', () => {
+  beforeEach(() => {
+    setViewport(1000, 800);
+  });
+
+  it('returns correct space around a centered element', () => {
+    const trigger = makeTrigger({ top: 350, bottom: 450, left: 400, right: 600, width: 200, height: 100 });
+    const space = getAvailableSpace(trigger);
+    // top - GUTTER = 350 - 8 = 342
+    expect(space.availableAbove).toBe(342);
+    // viewportHeight - bottom - GUTTER = 800 - 450 - 8 = 342
+    expect(space.availableBelow).toBe(342);
+    // left - GUTTER = 400 - 8 = 392
+    expect(space.availableLeft).toBe(392);
+    // viewportWidth - right - GUTTER = 1000 - 600 - 8 = 392
+    expect(space.availableRight).toBe(392);
+  });
+
+  it('clamps to 0 when trigger is outside viewport edges', () => {
+    // Trigger extends beyond the top and left edges
+    const trigger = makeTrigger({ top: -20, bottom: 810, left: -5, right: 1010, width: 55, height: 30 });
+    const space = getAvailableSpace(trigger);
+    expect(space.availableAbove).toBe(0);
+    expect(space.availableLeft).toBe(0);
+    expect(space.availableBelow).toBe(0);
+    expect(space.availableRight).toBe(0);
+  });
+
+  it('incorporates offset into available space', () => {
+    const trigger = makeTrigger({ top: 200, bottom: 300, left: 100, right: 200, width: 100, height: 100 });
+    const withoutOffset = getAvailableSpace(trigger, 0);
+    const withOffset = getAvailableSpace(trigger, 20);
+    // Adding offset shrinks available space in each direction
+    expect(withOffset.availableAbove).toBe(withoutOffset.availableAbove - 20);
+    expect(withOffset.availableBelow).toBe(withoutOffset.availableBelow - 20);
+    expect(withOffset.availableLeft).toBe(withoutOffset.availableLeft - 20);
+    expect(withOffset.availableRight).toBe(withoutOffset.availableRight - 20);
+  });
+});
+
+describe('getAnchoredPosition', () => {
+  beforeEach(() => {
+    setViewport(1000, 800);
+  });
+
+  describe('basic placements', () => {
+    it('positions content above trigger for placement "top"', () => {
+      const trigger = makeTrigger({ top: 400, bottom: 450, left: 200, right: 600, width: 400, height: 50 });
+      const content = makeContent(100, 40);
+      const { top, left, computedPlacement } = getAnchoredPosition(trigger, content, { placement: 'top', offset: 0 });
+      // top - contentHeight = 400 - 40 = 360
+      expect(top).toBe(360);
+      // left + (triggerWidth - contentWidth) / 2 = 200 + (400 - 100)/2 = 350
+      expect(left).toBe(350);
+      expect(computedPlacement).toBe('top');
+    });
+
+    it('positions content below trigger for placement "bottom"', () => {
+      const trigger = makeTrigger({ top: 100, bottom: 150, left: 100, right: 300, width: 200, height: 50 });
+      const content = makeContent(100, 40);
+      const { top, left, computedPlacement } = getAnchoredPosition(trigger, content, {
+        placement: 'bottom',
+        offset: 5,
+      });
+      // triggerBottom + offset = 150 + 5 = 155
+      expect(top).toBe(155);
+      // triggerLeft + (triggerWidth - contentWidth) / 2 = 100 + (200 - 100)/2 = 150
+      expect(left).toBe(150);
+      expect(computedPlacement).toBe('bottom');
+    });
+
+    it('positions content to the left of trigger for placement "left"', () => {
+      const trigger = makeTrigger({ top: 300, bottom: 400, left: 500, right: 600, width: 100, height: 100 });
+      const content = makeContent(80, 40);
+      const { top, left, computedPlacement } = getAnchoredPosition(trigger, content, { placement: 'left', offset: 0 });
+      // triggerTop + (triggerHeight - contentHeight) / 2 = 300 + (100 - 40)/2 = 330
+      expect(top).toBe(330);
+      // triggerLeft - contentWidth = 500 - 80 = 420
+      expect(left).toBe(420);
+      expect(computedPlacement).toBe('left');
+    });
+
+    it('positions content to the right of trigger for placement "right"', () => {
+      const trigger = makeTrigger({ top: 300, bottom: 400, left: 100, right: 200, width: 100, height: 100 });
+      const content = makeContent(80, 40);
+      const { top, left, computedPlacement } = getAnchoredPosition(trigger, content, { placement: 'right', offset: 0 });
+      // triggerTop + (triggerHeight - contentHeight) / 2 = 300 + (100 - 40)/2 = 330
+      expect(top).toBe(330);
+      // triggerRight = 200
+      expect(left).toBe(200);
+      expect(computedPlacement).toBe('right');
+    });
+  });
+
+  describe('alignment for start and end placements', () => {
+    it('aligns to start for "bottom-start"', () => {
+      const trigger = makeTrigger({ top: 100, bottom: 150, left: 200, right: 500, width: 300, height: 50 });
+      const content = makeContent(120, 60);
+      const { top, left, computedPlacement } = getAnchoredPosition(trigger, content, { placement: 'bottom-start' });
+      expect(top).toBe(150);
+      expect(left).toBe(200);
+      expect(computedPlacement).toBe('bottom-start');
+    });
+
+    it('aligns to end for "bottom-end"', () => {
+      const trigger = makeTrigger({ top: 100, bottom: 150, left: 200, right: 500, width: 300, height: 50 });
+      const content = makeContent(120, 60);
+      const { top, left, computedPlacement } = getAnchoredPosition(trigger, content, { placement: 'bottom-end' });
+      expect(top).toBe(150);
+      // triggerRight - contentWidth = 500 - 120 = 380
+      expect(left).toBe(380);
+      expect(computedPlacement).toBe('bottom-end');
+    });
+
+    it('aligns to start for "top-start"', () => {
+      const trigger = makeTrigger({ top: 300, bottom: 350, left: 200, right: 500, width: 300, height: 50 });
+      const content = makeContent(120, 60);
+      const { top, left, computedPlacement } = getAnchoredPosition(trigger, content, { placement: 'top-start' });
+      // triggerTop - contentHeight = 300 - 60 = 240
+      expect(top).toBe(240);
+      expect(left).toBe(200);
+      expect(computedPlacement).toBe('top-start');
+    });
+
+    it('aligns to end for "top-end"', () => {
+      const trigger = makeTrigger({ top: 300, bottom: 350, left: 200, right: 500, width: 300, height: 50 });
+      const content = makeContent(120, 60);
+      const { top, left, computedPlacement } = getAnchoredPosition(trigger, content, { placement: 'top-end' });
+      // triggerTop - contentHeight = 300 - 60 = 240
+      expect(top).toBe(240);
+      // triggerRight - contentWidth = 500 - 120 = 380
+      expect(left).toBe(380);
+      expect(computedPlacement).toBe('top-end');
+    });
+
+    it('aligns to start for "left-start"', () => {
+      const trigger = makeTrigger({ top: 200, bottom: 300, left: 400, right: 500, width: 100, height: 100 });
+      const content = makeContent(80, 60);
+      const { top, left, computedPlacement } = getAnchoredPosition(trigger, content, { placement: 'left-start' });
+      expect(top).toBe(200);
+      // triggerLeft - contentWidth = 400 - 80 = 320
+      expect(left).toBe(320);
+      expect(computedPlacement).toBe('left-start');
+    });
+
+    it('aligns to start for "right-start"', () => {
+      const trigger = makeTrigger({ top: 200, bottom: 300, left: 100, right: 200, width: 100, height: 100 });
+      const content = makeContent(80, 60);
+      const { top, left, computedPlacement } = getAnchoredPosition(trigger, content, { placement: 'right-start' });
+      expect(top).toBe(200);
+      expect(left).toBe(200);
+      expect(computedPlacement).toBe('right-start');
+    });
+
+    it('aligns to start for "left-end"', () => {
+      const trigger = makeTrigger({ top: 200, bottom: 300, left: 400, right: 500, width: 100, height: 100 });
+      const content = makeContent(80, 60);
+      const { top, left, computedPlacement } = getAnchoredPosition(trigger, content, { placement: 'left-end' });
+      // triggerBottom - contentHeight = 300 - 60 = 240
+      expect(top).toBe(240);
+      // triggerLeft - contentWidth = 400 - 80 = 320
+      expect(left).toBe(320);
+      expect(computedPlacement).toBe('left-end');
+    });
+
+    it('aligns to start for "right-end"', () => {
+      const trigger = makeTrigger({ top: 200, bottom: 300, left: 100, right: 200, width: 100, height: 100 });
+      const content = makeContent(80, 60);
+      const { top, left, computedPlacement } = getAnchoredPosition(trigger, content, { placement: 'right-end' });
+      // triggerBottom - contentHeight = 300 - 60 = 240
+      expect(top).toBe(240);
+      expect(left).toBe(200);
+      expect(computedPlacement).toBe('right-end');
+    });
+  });
+
+  describe('clamping behavior', () => {
+    it('clamps left to GUTTER when content would overflow the left edge', () => {
+      // Trigger near left edge, content wider than trigger
+      const trigger = makeTrigger({ top: 100, bottom: 150, left: 10, right: 110, width: 100, height: 50 });
+      const content = makeContent(200, 40);
+      const { left } = getAnchoredPosition(trigger, content, { placement: 'bottom' });
+      // Without clamping: left = 10 + (100 - 200)/2 = -40. With clamping: GUTTER = 8
+      expect(left).toBe(GUTTER);
+    });
+
+    it('clamps left to keep content inside right edge of viewport', () => {
+      // Trigger near right edge 1000px
+      const trigger = makeTrigger({ top: 100, bottom: 150, left: 900, right: 990, width: 90, height: 50 });
+      const content = makeContent(200, 40);
+      const { left } = getAnchoredPosition(trigger, content, { placement: 'bottom' });
+      // Without clamping: left = 900 + (90 - 200)/2 = 845. Max: 1000 - 200 - 8 = 792
+      expect(left).toBe(1000 - 200 - GUTTER);
+    });
+  });
+
+  describe('flip behavior', () => {
+    it('flips from "top" to "bottom" when there is not enough space above', () => {
+      // Trigger near the top of the viewport; content height is large
+      const trigger = makeTrigger({ top: 20, bottom: 70, left: 400, right: 600, width: 200, height: 50 });
+      const content = makeContent(100, 200);
+      // availableAbove = 20 - 8 = 12, availableBelow = 800 - 70 - 8 = 722
+      const { computedPlacement } = getAnchoredPosition(trigger, content, { placement: 'top', flip: true });
+      expect(computedPlacement).toBe('bottom');
+    });
+
+    it('flips from "bottom" to "top" when there is not enough space below', () => {
+      // Trigger near the bottom of the viewport
+      const trigger = makeTrigger({ top: 720, bottom: 770, left: 400, right: 600, width: 200, height: 50 });
+      const content = makeContent(100, 100);
+      // availableBelow = 800 - 770 - 8 = 22, availableAbove = 720 - 8 = 712
+      const { computedPlacement } = getAnchoredPosition(trigger, content, { placement: 'bottom', flip: true });
+      expect(computedPlacement).toBe('top');
+    });
+
+    it('flips from "left" to "right" when there is not enough space to the left', () => {
+      const trigger = makeTrigger({ top: 300, bottom: 400, left: 20, right: 120, width: 100, height: 100 });
+      const content = makeContent(200, 40);
+      // availableLeft = 20 - 8 = 12, availableRight = 1000 - 120 - 8 = 872
+      const { computedPlacement } = getAnchoredPosition(trigger, content, { placement: 'left', flip: true });
+      expect(computedPlacement).toBe('right');
+    });
+
+    it('flips from "right" to "left" when there is not enough space to the right', () => {
+      const trigger = makeTrigger({ top: 300, bottom: 400, left: 800, right: 900, width: 100, height: 100 });
+      const content = makeContent(200, 40);
+      // availableRight = 1000 - 900 - 8 = 92, availableLeft = 800 - 8 = 792
+      const { computedPlacement } = getAnchoredPosition(trigger, content, { placement: 'right', flip: true });
+      expect(computedPlacement).toBe('left');
+    });
+
+    it('does not flip when flip is false', () => {
+      const trigger = makeTrigger({ top: 20, bottom: 70, left: 400, right: 600, width: 200, height: 50 });
+      const content = makeContent(100, 200);
+      const { computedPlacement } = getAnchoredPosition(trigger, content, { placement: 'top', flip: false });
+      expect(computedPlacement).toBe('top');
+    });
+  });
+});
+
+describe('getAvailableSpaceForPlacement', () => {
+  beforeEach(() => {
+    setViewport(1000, 800);
+  });
+
+  it('returns viewport width and available-above height for "top"', () => {
+    const trigger = makeTrigger({ top: 400, bottom: 450, left: 300, right: 700, width: 400, height: 50 });
+    const { maxWidth, maxHeight } = getAvailableSpaceForPlacement(trigger, 'top');
+    expect(maxWidth).toBe(1000 - GUTTER * 2);
+    // availableAbove = 400 - 8 = 392
+    expect(maxHeight).toBe(392);
+  });
+
+  it('returns viewport width and available-below height for "bottom"', () => {
+    const trigger = makeTrigger({ top: 100, bottom: 150, left: 300, right: 700, width: 400, height: 50 });
+    const { maxWidth, maxHeight } = getAvailableSpaceForPlacement(trigger, 'bottom');
+    expect(maxWidth).toBe(1000 - GUTTER * 2);
+    // availableBelow = 800 - 150 - 8 = 642
+    expect(maxHeight).toBe(642);
+  });
+
+  it('returns available-left width and viewport height for "left"', () => {
+    const trigger = makeTrigger({ top: 200, bottom: 300, left: 400, right: 500, width: 100, height: 100 });
+    const { maxWidth, maxHeight } = getAvailableSpaceForPlacement(trigger, 'left');
+    // availableLeft = 400 - 8 = 392
+    expect(maxWidth).toBe(392);
+    expect(maxHeight).toBe(800 - GUTTER * 2);
+  });
+
+  it('returns available-right width and viewport height for "right"', () => {
+    const trigger = makeTrigger({ top: 200, bottom: 300, left: 400, right: 600, width: 200, height: 100 });
+    const { maxWidth, maxHeight } = getAvailableSpaceForPlacement(trigger, 'right');
+    // availableRight = 1000 - 600 - 8 = 392
+    expect(maxWidth).toBe(392);
+    expect(maxHeight).toBe(800 - GUTTER * 2);
+  });
+
+  it('returns correct size for "top-start"', () => {
+    const trigger = makeTrigger({ top: 300, bottom: 350, left: 200, right: 500, width: 300, height: 50 });
+    const { maxWidth, maxHeight } = getAvailableSpaceForPlacement(trigger, 'top-start');
+    // availableRight + triggerWidth = (1000 - 500 - 8) + 300 = 792
+    expect(maxWidth).toBe(792);
+    // availableAbove = 300 - 8 = 292
+    expect(maxHeight).toBe(292);
+  });
+
+  it('returns correct size for "bottom-end"', () => {
+    const trigger = makeTrigger({ top: 100, bottom: 150, left: 200, right: 500, width: 300, height: 50 });
+    const { maxWidth, maxHeight } = getAvailableSpaceForPlacement(trigger, 'bottom-end');
+    // availableLeft + triggerWidth = (200 - 8) + 300 = 492
+    expect(maxWidth).toBe(492);
+    // availableBelow = 800 - 150 - 8 = 642
+    expect(maxHeight).toBe(642);
+  });
+
+  it('returns correct size for "left-start"', () => {
+    const trigger = makeTrigger({ top: 200, bottom: 400, left: 300, right: 400, width: 100, height: 200 });
+    const { maxWidth, maxHeight } = getAvailableSpaceForPlacement(trigger, 'left-start');
+    // availableLeft = 300 - 8 = 292
+    expect(maxWidth).toBe(292);
+    // availableBelow + triggerHeight = (800 - 400 - 8) + 200 = 592
+    expect(maxHeight).toBe(592);
+  });
+
+  it('returns correct size for "right-end"', () => {
+    const trigger = makeTrigger({ top: 300, bottom: 500, left: 400, right: 600, width: 200, height: 200 });
+    const { maxWidth, maxHeight } = getAvailableSpaceForPlacement(trigger, 'right-end');
+    // availableRight = 1000 - 600 - 8 = 392
+    expect(maxWidth).toBe(392);
+    // availableAbove + triggerHeight = (300 - 8) + 200 = 492
+    expect(maxHeight).toBe(492);
+  });
+
+  it('incorporates offset into calculations', () => {
+    const trigger = makeTrigger({ top: 300, bottom: 350, left: 200, right: 500, width: 300, height: 50 });
+    const withoutOffset = getAvailableSpaceForPlacement(trigger, 'top', 0);
+    const withOffset = getAvailableSpaceForPlacement(trigger, 'top', 20);
+    // offset reduces availableAbove, so maxHeight decreases
+    expect(withOffset.maxHeight).toBe(withoutOffset.maxHeight - 20);
+  });
+});
diff --git a/packages/super-editor/src/editors/v1/utils/anchored-position.ts b/packages/super-editor/src/editors/v1/utils/anchored-position.ts
new file mode 100644
index 0000000000..83f82987ba
--- /dev/null
+++ b/packages/super-editor/src/editors/v1/utils/anchored-position.ts
@@ -0,0 +1,255 @@
+type Placement =
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left-start'
+  | 'left-end'
+  | 'right-start'
+  | 'right-end';
+
+/**
+ * Minimum distance from the viewport edges in pixels
+ */
+const GUTTER = 8;
+
+/**
+ * A mapping of placements to their opposite placements, used for flipping the position.
+ */
+const FLIP_MAP: Record<Placement, Placement> = {
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left',
+  'top-start': 'bottom-start',
+  'top-end': 'bottom-end',
+  'bottom-start': 'top-start',
+  'bottom-end': 'top-end',
+  'left-start': 'right-start',
+  'left-end': 'right-end',
+  'right-start': 'left-start',
+  'right-end': 'left-end',
+};
+
+/**
+ * Calculates the position in pixels of a content element relative to a trigger element based on the specified position and offset.
+ * This is useful for positioning tooltips, popovers, or other floating elements in relation to a reference element.
+ * @param triggerElem - The element that triggers the positioning of the content element.
+ * @param contentElem - The content element to be positioned.
+ * @param options - An object containing placement, offset, and flip options.
+ * @param options.placement - The desired position of the content element relative to the trigger element 'top', 'bottom', 'left', or 'right' (defaults to 'top').
+ * @param options.offset - An optional offset value to adjust the position of the content element (default is 0).
+ * @param options.flip - An optional boolean to determine if the position should flip to the opposite side if there isn't enough space (default is true).
+ * @returns An object containing the calculated top and left positions for the content element in pixels and the final computed placement after considering available space.
+ * @example
+ * ```javascript
+ * const triggerElement = document.getElementById('trigger');
+ * const contentElement = document.getElementById('content');
+ * const position = 'bottom';
+ * const offset = 10;
+ * const anchoredPosition = getAnchoredPosition(triggerElement, contentElement, { position, offset });
+ * contentElement.style.top = `${anchoredPosition.top}px`;
+ * contentElement.style.left = `${anchoredPosition.left}px`;
+ * ```
+ */
+export const getAnchoredPosition = (
+  triggerElem: HTMLElement,
+  contentElem: HTMLElement,
+  options: { placement?: Placement; offset?: number; flip?: boolean } = { placement: 'top', offset: 0, flip: true },
+): { top: number; left: number; computedPlacement: Placement } => {
+  const { placement = 'top', offset = 0, flip = true } = options;
+  const triggerRect = triggerElem.getBoundingClientRect();
+  const contentWidth = contentElem.offsetWidth;
+  const contentHeight = isElemScrollable(contentElem) ? contentElem.scrollHeight : contentElem.offsetHeight;
+  const viewportWidth = window.innerWidth || document.documentElement.clientWidth || 0;
+  const { availableAbove, availableBelow, availableLeft, availableRight } = getAvailableSpace(triggerElem, offset);
+
+  let computedPlacement = placement;
+
+  if (flip) {
+    if (
+      (placement.startsWith('top') && availableAbove < contentHeight && availableBelow > availableAbove) ||
+      (placement.startsWith('bottom') && availableBelow < contentHeight && availableAbove > availableBelow) ||
+      (placement.startsWith('left') && availableLeft < contentWidth && availableRight > availableLeft) ||
+      (placement.startsWith('right') && availableRight < contentWidth && availableLeft > availableRight)
+    ) {
+      computedPlacement = FLIP_MAP[placement];
+    }
+
+    if (
+      (placement === 'left-start' || placement === 'right-start') &&
+      availableBelow < contentHeight &&
+      availableAbove > availableBelow
+    ) {
+      computedPlacement = placement.replace('start', 'end') as Placement;
+    }
+    if (
+      (placement === 'left-end' || placement === 'right-end') &&
+      availableAbove < contentHeight &&
+      availableBelow > availableAbove
+    ) {
+      computedPlacement = placement.replace('end', 'start') as Placement;
+    }
+  }
+
+  let top = 0;
+  let left = 0;
+
+  switch (computedPlacement) {
+    case 'top':
+      top = Math.max(GUTTER, triggerRect.top - contentHeight - offset);
+      left = triggerRect.left + (triggerRect.width - contentWidth) / 2;
+      left = Math.max(GUTTER, Math.min(left, viewportWidth - contentWidth - GUTTER));
+      break;
+    case 'top-start':
+      top = Math.max(GUTTER, triggerRect.top - contentHeight - offset);
+      left = triggerRect.left;
+      left = Math.max(GUTTER, Math.min(left, viewportWidth - contentWidth - GUTTER));
+      break;
+    case 'top-end':
+      top = Math.max(GUTTER, triggerRect.top - contentHeight - offset);
+      left = triggerRect.right - contentWidth;
+      left = Math.max(GUTTER, Math.min(left, viewportWidth - contentWidth - GUTTER));
+      break;
+    case 'bottom':
+      top = triggerRect.bottom + offset;
+      left = triggerRect.left + (triggerRect.width - contentWidth) / 2;
+      left = Math.max(GUTTER, Math.min(left, viewportWidth - contentWidth - GUTTER));
+      break;
+    case 'bottom-start':
+      top = triggerRect.bottom + offset;
+      left = triggerRect.left;
+      left = Math.max(GUTTER, Math.min(left, viewportWidth - contentWidth - GUTTER));
+      break;
+    case 'bottom-end':
+      top = triggerRect.bottom + offset;
+      left = triggerRect.right - contentWidth;
+      left = Math.max(GUTTER, Math.min(left, viewportWidth - contentWidth - GUTTER));
+      break;
+    case 'left':
+      top = triggerRect.top + (triggerRect.height - contentHeight) / 2;
+      left = triggerRect.left - contentWidth - offset;
+      break;
+    case 'left-start':
+      top = triggerRect.top;
+      left = triggerRect.left - contentWidth - offset;
+      break;
+    case 'left-end':
+      top = Math.max(GUTTER, triggerRect.bottom - contentHeight);
+      left = triggerRect.left - contentWidth - offset;
+      break;
+    case 'right':
+      top = triggerRect.top + (triggerRect.height - contentHeight) / 2;
+      left = triggerRect.right + offset;
+      break;
+    case 'right-start':
+      top = triggerRect.top;
+      left = triggerRect.right + offset;
+      break;
+    case 'right-end':
+      top = Math.max(GUTTER, triggerRect.bottom - contentHeight);
+      left = triggerRect.right + offset;
+      break;
+  }
+
+  return { top, left, computedPlacement };
+};
+
+/**
+ * Calculates the available space around a trigger element in the viewport, considering an optional offset.
+ * @param triggerElem - The element for which to calculate the available space.
+ * @param offset - An optional offset value to adjust the available space calculation (default is 0).
+ * @returns An object containing the available space in pixels above, below, to the left, and to the right of the trigger element.
+ */
+export const getAvailableSpace = (triggerElem: HTMLElement, offset: number = 0) => {
+  const rect = triggerElem.getBoundingClientRect();
+  const viewportHeight = window.innerHeight || document.documentElement.clientHeight || 0;
+  const viewportWidth = window.innerWidth || document.documentElement.clientWidth || 0;
+  const belowTop = rect.bottom + offset;
+  const aboveBottom = rect.top - offset;
+  const availableBelow = Math.max(0, viewportHeight - belowTop - GUTTER);
+  const availableAbove = Math.max(0, aboveBottom - GUTTER);
+  const availableLeft = Math.max(0, rect.left - offset - GUTTER);
+  const availableRight = Math.max(0, viewportWidth - rect.right - offset - GUTTER);
+  return { availableBelow, availableAbove, availableLeft, availableRight };
+};
+
+/**
+ * Calculates the maximum available width and height for a content element based on the specified placement relative to a trigger element.
+ * @param triggerElem - The element that triggers the positioning of the content element.
+ * @param placement - The desired placement of the content element relative to the trigger element ('top', 'bottom', 'left', 'right', etc.).
+ * @param offset - An optional offset value to adjust the available space calculation (default is 0).
+ * @returns An object containing the maximum available width and height for the content element.
+ */
+export const getAvailableSpaceForPlacement = (triggerElem: HTMLElement, placement: Placement, offset: number = 0) => {
+  const { availableAbove, availableBelow, availableLeft, availableRight } = getAvailableSpace(triggerElem, offset);
+  const viewportWidth = window.innerWidth || document.documentElement.clientWidth || 0;
+  const viewportHeight = window.innerHeight || document.documentElement.clientHeight || 0;
+  const rect = triggerElem.getBoundingClientRect();
+
+  let maxHeight = 0;
+  let maxWidth = 0;
+
+  switch (placement) {
+    case 'top':
+      maxWidth = viewportWidth - GUTTER * 2;
+      maxHeight = availableAbove;
+      break;
+    case 'bottom':
+      maxWidth = viewportWidth - GUTTER * 2;
+      maxHeight = availableBelow;
+      break;
+    case 'left':
+      maxWidth = availableLeft;
+      maxHeight = viewportHeight - GUTTER * 2;
+      break;
+    case 'right':
+      maxWidth = availableRight;
+      maxHeight = viewportHeight - GUTTER * 2;
+      break;
+    case 'top-start':
+      maxWidth = availableRight + rect.width;
+      maxHeight = availableAbove;
+      break;
+    case 'top-end':
+      maxWidth = availableLeft + rect.width;
+      maxHeight = availableAbove;
+      break;
+    case 'bottom-start':
+      maxWidth = availableRight + rect.width;
+      maxHeight = availableBelow;
+      break;
+    case 'bottom-end':
+      maxWidth = availableLeft + rect.width;
+      maxHeight = availableBelow;
+      break;
+    case 'left-start':
+      maxWidth = availableLeft;
+      maxHeight = availableBelow + rect.height;
+      break;
+    case 'left-end':
+      maxWidth = availableLeft;
+      maxHeight = availableAbove + rect.height;
+      break;
+    case 'right-start':
+      maxWidth = availableRight;
+      maxHeight = availableBelow + rect.height;
+      break;
+    case 'right-end':
+      maxWidth = availableRight;
+      maxHeight = availableAbove + rect.height;
+      break;
+  }
+
+  return { maxWidth, maxHeight };
+};
+
+const isElemScrollable = (elem: HTMLElement) => {
+  const computedStyle = window.getComputedStyle(elem);
+  const isScrollable = ['auto', 'scroll'].includes(computedStyle.overflowY);
+  return isScrollable && elem.scrollHeight >= elem.clientHeight;
+};