diff --git a/docs/demos/edge-popup.md b/docs/demos/edge-popup.md
new file mode 100644
index 00000000..1ea4e6fa
--- /dev/null
+++ b/docs/demos/edge-popup.md
@@ -0,0 +1,8 @@
+---
+title: edge-popup
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/edge-popup.tsx"></code>
\ No newline at end of file
diff --git a/docs/examples/edge-popup.tsx b/docs/examples/edge-popup.tsx
new file mode 100644
index 00000000..1f146e9e
--- /dev/null
+++ b/docs/examples/edge-popup.tsx
@@ -0,0 +1,121 @@
+/**
+ * iframe: true
+ */
+
+import React from 'react';
+import type { CSSMotionProps } from 'rc-motion';
+import type { BuildInPlacements, TriggerProps } from 'rc-trigger';
+import Trigger from 'rc-trigger';
+import './case.less';
+
+const builtinPlacements: BuildInPlacements = {
+  left: {
+    points: ['cr', 'cl'],
+  },
+  right: {
+    points: ['cl', 'cr'],
+  },
+  top: {
+    points: ['bc', 'tc'],
+  },
+  bottom: {
+    points: ['tc', 'bc'],
+  },
+  topLeft: {
+    points: ['bl', 'tl'],
+  },
+  topRight: {
+    points: ['br', 'tr'],
+  },
+  bottomRight: {
+    points: ['tr', 'br'],
+  },
+  bottomLeft: {
+    points: ['tl', 'bl'],
+  },
+};
+
+const Motion: CSSMotionProps = {
+  motionName: 'case-motion',
+};
+
+const MaskMotion: CSSMotionProps = {
+  motionName: 'mask-motion',
+};
+
+function useControl<T>(valuePropName: string, defaultValue: T): [T, any] {
+  const [value, setValue] = React.useState<T>(defaultValue);
+
+  return [
+    value,
+    {
+      value,
+      checked: value,
+      onChange({ target }) {
+        setValue(target[valuePropName]);
+      },
+    },
+  ];
+}
+
+const Demo = () => {
+  const renderNode = (params: { placement?: TriggerProps['popupPlacement'] }) => {
+    const { placement = 'top' } = params;
+    return (
+      <Trigger
+        popupAlign={{
+          offset: [0, 0],
+          overflow: {
+            adjustX: 1,
+            adjustY: 1,
+          },
+        }}
+        arrow={false}
+        popupPlacement={placement}
+        destroyPopupOnHide={true}
+        mask={false}
+        maskMotion={MaskMotion}
+        maskClosable={false}
+        stretch={''}
+        builtinPlacements={builtinPlacements}
+        forceRender={false}
+        popupStyle={{
+          border: '1px solid red',
+          background: 'white',
+          boxSizing: 'border-box',
+        }}
+        popup={<div>3000</div>}
+        popupMotion={null}
+        onPopupAlign={() => {
+          console.warn('Aligned!');
+        }}
+      >
+        <span
+          tabIndex={0}
+          role="button"
+        >
+          T
+        </span>
+      </Trigger>
+    )
+  }
+
+  return (
+    <React.StrictMode>
+      <div>
+        {renderNode({ placement: 'top' })}
+      </div>
+      <div style={{position: 'absolute', bottom: 0, right: 0}}>
+        {renderNode({ placement: 'right' })}
+      </div>
+      <div style={{position: 'absolute', bottom: 0, left: 0}}>
+        {renderNode({ placement: 'top' })}
+      </div>
+      <div style={{position: 'absolute', top: 0, right: 0}}>
+        {renderNode({ placement: 'left' })}
+      </div>
+    </React.StrictMode>
+  );
+};
+
+export default Demo;
diff --git a/src/hooks/useAlign.ts b/src/hooks/useAlign.ts
index d4cc296b..a604d99c 100644
--- a/src/hooks/useAlign.ts
+++ b/src/hooks/useAlign.ts
@@ -87,6 +87,56 @@ function reversePoints(points: Points, index: number): string {
     .join('');
 }
 
+const EDGE_OFFSET = 6
+
+const calcOffsetByVisibleArea = (params: {
+  offset: number;
+  direction: 'horizontal' | 'vertical',
+  widthOrHeight: number;
+  visibleRegionArea: {
+    left: number;
+    right: number;
+    bottom: number;
+    top: number;
+  }
+}) => {
+  let arrowOffset = 0
+  const { offset, widthOrHeight, direction, visibleRegionArea } = params
+  
+  /** 
+   * When offset is less than 0, it means that it is blocked by the visible area. 
+   * eg left: -10, it means that the left side of the popup is blocked by the visible area.
+   * or top: -10, it means that the top side of the popup is blocked by the visible area.
+   * */
+  if (offset < 0) {
+    return {
+      offset: 0,
+      arrowOffset: EDGE_OFFSET,
+    }
+  }
+  /** 
+   * when nextOffsetX add popupElementWidth is large than visibleRegionArea
+   * we should calculate arrowOffset, and set nextOffsetX to visibleRegionArea.right - width
+   */
+  if (direction === 'horizontal' && (offset + widthOrHeight) > visibleRegionArea.right) {
+    return {
+      offset: visibleRegionArea.right - widthOrHeight,
+      arrowOffset: -EDGE_OFFSET
+    }
+  }
+  if (direction === 'vertical' && (offset + widthOrHeight) > visibleRegionArea.bottom) {
+    return {
+      offset: visibleRegionArea.bottom - widthOrHeight,
+      arrowOffset: -EDGE_OFFSET
+    }
+  }
+
+  return {
+    offset,
+    arrowOffset,
+  }
+}
+
 export default function useAlign(
   open: boolean,
   popupEle: HTMLElement,
@@ -645,6 +695,21 @@ export default function useAlign(
 
       // ============================ Arrow ============================
       // Arrow center align
+      const { offset: offsetX, arrowOffset: arrowXOffset } = calcOffsetByVisibleArea({
+        offset: nextOffsetX,
+        direction: 'horizontal',
+        widthOrHeight: popupWidth,
+        visibleRegionArea,
+      })
+      const { offset: offsetY, arrowOffset: arrowYOffset } = calcOffsetByVisibleArea({
+        offset: nextOffsetY,
+        direction: 'vertical',
+        widthOrHeight: popupHeight,
+        visibleRegionArea,
+      });
+      nextOffsetX = offsetX
+      nextOffsetY = offsetY
+      
       const popupLeft = popupRect.x + nextOffsetX;
       const popupRight = popupLeft + popupWidth;
       const popupTop = popupRect.y + nextOffsetY;
@@ -659,13 +724,13 @@ export default function useAlign(
       const minRight = Math.min(popupRight, targetRight);
 
       const xCenter = (maxLeft + minRight) / 2;
-      const nextArrowX = xCenter - popupLeft;
+      const nextArrowX = xCenter - popupLeft + arrowXOffset;
 
       const maxTop = Math.max(popupTop, targetTop);
       const minBottom = Math.min(popupBottom, targetBottom);
 
       const yCenter = (maxTop + minBottom) / 2;
-      const nextArrowY = yCenter - popupTop;
+      const nextArrowY = yCenter - popupTop + arrowYOffset;
 
       onPopupAlign?.(popupEle, nextAlignInfo);