diff --git a/packages/ui/pop-confirm/src/use-pop-confirm.ts b/packages/ui/pop-confirm/src/use-pop-confirm.ts
index 168b28b38..bc193daa1 100644
--- a/packages/ui/pop-confirm/src/use-pop-confirm.ts
+++ b/packages/ui/pop-confirm/src/use-pop-confirm.ts
@@ -117,6 +117,10 @@ export interface UsePopConfirmProps {
    * 点击确认按钮时回调
    */
   onConfirm?: () => void
+  /**
+   * 设置基于 reference 元素的间隙偏移量
+   */
+  gutterGap?: number
   /**
    * 是否开启禁用。暂不对外暴露
    * @private
diff --git a/packages/ui/pop-confirm/stories/gutter-gap.stories.tsx b/packages/ui/pop-confirm/stories/gutter-gap.stories.tsx
new file mode 100644
index 000000000..66c5387d2
--- /dev/null
+++ b/packages/ui/pop-confirm/stories/gutter-gap.stories.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import PopConfirm from '../src'
+import Button from '@hi-ui/button'
+
+/**
+ * @title 设置基于依附元素的间隙偏移量
+ */
+export const GutterGap = () => {
+  return (
+    <>
+      <h1>Gutter Gap</h1>
+      <div className="pop-confirm-basic__wrap">
+        <PopConfirm title="Delete this item along with the entered content?" gutterGap={30}>
+          <Button>Trigger</Button>
+        </PopConfirm>
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/pop-confirm/stories/index.stories.tsx b/packages/ui/pop-confirm/stories/index.stories.tsx
index b41c63c5b..959df58a8 100644
--- a/packages/ui/pop-confirm/stories/index.stories.tsx
+++ b/packages/ui/pop-confirm/stories/index.stories.tsx
@@ -4,6 +4,7 @@ import PopConfirm from '../src'
 export * from './basic.stories'
 export * from './custom-icon.stories'
 export * from './async.stories'
+export * from './gutter-gap.stories'
 
 export default {
   title: 'FeedBack/PopConfirm',
diff --git a/packages/ui/popover/src/use-popover.tsx b/packages/ui/popover/src/use-popover.tsx
index 553b47888..af03b17c3 100644
--- a/packages/ui/popover/src/use-popover.tsx
+++ b/packages/ui/popover/src/use-popover.tsx
@@ -181,6 +181,10 @@ export interface UsePopoverProps extends PopperOverlayProps {
    * 鼠标移出后隐藏延时，单位：毫秒
    */
   mouseLeaveDelay?: number
+  /**
+   * 设置基于 reference 元素的间隙偏移量
+   */
+  gutterGap?: number
 }
 
 export type UsePopoverReturn = ReturnType<typeof usePopover>
diff --git a/packages/ui/popover/stories/gutter-gap.stories.tsx b/packages/ui/popover/stories/gutter-gap.stories.tsx
new file mode 100644
index 000000000..b87d139c0
--- /dev/null
+++ b/packages/ui/popover/stories/gutter-gap.stories.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import Popover from '../src'
+import Button from '@hi-ui/button'
+
+/**
+ * @title 设置基于依附元素的间隙偏移量
+ */
+export const GutterGap = () => {
+  const title = <span>文字提示</span>
+  const content = (
+    <div>
+      <div>此处展示 Popover 具体内容</div>
+      <div>具体内容可以自行渲染</div>
+    </div>
+  )
+
+  return (
+    <>
+      <h1>Gutter Gap</h1>
+      <div className="popover-basic__wrap">
+        <Popover title={title} content={content} gutterGap={30} trigger="click">
+          <Button>trigger</Button>
+        </Popover>
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/popover/stories/index.stories.tsx b/packages/ui/popover/stories/index.stories.tsx
index 8ce8c9667..a243b6a80 100644
--- a/packages/ui/popover/stories/index.stories.tsx
+++ b/packages/ui/popover/stories/index.stories.tsx
@@ -6,6 +6,7 @@ export * from './arrow.stories'
 export * from './trigger.stories'
 export * from './placement.stories'
 export * from './controlled.stories'
+export * from './gutter-gap.stories'
 
 export default {
   title: 'Data Display/Popover',
diff --git a/packages/ui/tooltip/src/use-tooltip.ts b/packages/ui/tooltip/src/use-tooltip.ts
index 1c04dcf91..999d78d96 100644
--- a/packages/ui/tooltip/src/use-tooltip.ts
+++ b/packages/ui/tooltip/src/use-tooltip.ts
@@ -207,6 +207,10 @@ export interface UseTooltipProps extends PopperOverlayProps {
    * 鼠标移出后隐藏延时，单位：毫秒
    */
   mouseLeaveDelay?: number
+  /**
+   * 设置基于 reference 元素的间隙偏移量
+   */
+  gutterGap?: number
 }
 
 export type UseTooltipReturn = ReturnType<typeof useTooltip>
diff --git a/packages/ui/tooltip/stories/gutter-gap.stories.tsx b/packages/ui/tooltip/stories/gutter-gap.stories.tsx
new file mode 100644
index 000000000..bb42a441f
--- /dev/null
+++ b/packages/ui/tooltip/stories/gutter-gap.stories.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import Tooltip from '../src'
+import Button from '@hi-ui/button'
+
+/**
+ * @title 设置基于依附元素的间隙偏移量
+ */
+export const GutterGap = () => {
+  return (
+    <>
+      <h1>Gutter Gap</h1>
+      <div className="Tooltip-basic__wrap">
+        <Tooltip title="Tooltip Title" gutterGap={30} trigger="hover">
+          <Button>trigger</Button>
+        </Tooltip>
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/tooltip/stories/index.stories.tsx b/packages/ui/tooltip/stories/index.stories.tsx
index 2352ede35..29b92bc3c 100644
--- a/packages/ui/tooltip/stories/index.stories.tsx
+++ b/packages/ui/tooltip/stories/index.stories.tsx
@@ -6,6 +6,7 @@ export * from './trigger.stories'
 export * from './placement.stories'
 export * from './break-word.stories'
 export * from './with-api.stories'
+export * from './gutter-gap.stories'
 
 export default {
   title: 'Data Display/Tooltip',