diff --git a/packages/core/src/client/webcomponents/components/dock/DockEdge.vue b/packages/core/src/client/webcomponents/components/dock/DockEdge.vue
index 88bcdbbd..753fe1c6 100644
--- a/packages/core/src/client/webcomponents/components/dock/DockEdge.vue
+++ b/packages/core/src/client/webcomponents/components/dock/DockEdge.vue
@@ -45,6 +45,12 @@ const positionLabels: Record<string, string> = {
   bottom: 'Bottom',
   left: 'Left',
 }
+const positionDropdownPlacement: Record<string, 'top' | 'bottom' | 'left' | 'right'> = {
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left',
+}
 
 function switchPosition(pos: 'top' | 'right' | 'bottom' | 'left') {
   store.position = pos
@@ -74,6 +80,7 @@ function togglePositionDropdown() {
   setEdgePositionDropdown({
     el: positionButton.value,
     gap: 6,
+    placement: positionDropdownPlacement[store.position],
     content: () => h('div', { class: 'flex flex-col gap-0.5 min-w-28' }, positions.map(pos =>
       h('button', {
         class: [
diff --git a/packages/core/src/client/webcomponents/components/floating/FloatingPopover.ts b/packages/core/src/client/webcomponents/components/floating/FloatingPopover.ts
index 275cbfa8..f7bb4c6c 100644
--- a/packages/core/src/client/webcomponents/components/floating/FloatingPopover.ts
+++ b/packages/core/src/client/webcomponents/components/floating/FloatingPopover.ts
@@ -87,7 +87,9 @@ const FloatingPopoverComponent = defineComponent({
 
       const vw = window.innerWidth
       const vh = window.innerHeight
-      if (rect.left < DETECT_MARGIN)
+      if (props.item?.placement)
+        align = props.item.placement
+      else if (rect.left < DETECT_MARGIN)
         align = 'right'
       else if (rect.left + rect.width > vw - DETECT_MARGIN)
         align = 'left'
diff --git a/packages/core/src/client/webcomponents/state/floating-tooltip.ts b/packages/core/src/client/webcomponents/state/floating-tooltip.ts
index ff2982ee..2a27d42e 100644
--- a/packages/core/src/client/webcomponents/state/floating-tooltip.ts
+++ b/packages/core/src/client/webcomponents/state/floating-tooltip.ts
@@ -5,6 +5,7 @@ export interface FloatingPopoverProps {
   el: HTMLElement
   content: string | (() => VNode | undefined)
   gap?: number
+  placement?: 'top' | 'bottom' | 'left' | 'right'
 }
 
 const tooltip = shallowRef<FloatingPopoverProps | null>(null)