diff --git a/web/app/components/base/infotip/index.tsx b/web/app/components/base/infotip/index.tsx
index fe47bc6d667..3a80d1f5c94 100644
--- a/web/app/components/base/infotip/index.tsx
+++ b/web/app/components/base/infotip/index.tsx
@@ -36,6 +36,8 @@ type InfotipProps = {
   'aria-label': string
   /** Placement of the popup relative to the trigger. Defaults to `top`. */
   'placement'?: Placement
+  /** Distance between the trigger and popup. Defaults to the popover primitive spacing. */
+  'sideOffset'?: number
   /** Extra classes on the outer trigger wrapper (layout / margin). */
   'className'?: string
   /** Extra classes on the `?` icon itself (size / color overrides). */
@@ -52,6 +54,7 @@ export function Infotip({
   children,
   'aria-label': ariaLabel,
   placement = 'top',
+  sideOffset,
   className,
   iconClassName,
   popupClassName,
@@ -79,6 +82,7 @@ export function Infotip({
       </PopoverTrigger>
       <PopoverContent
         placement={placement}
+        sideOffset={sideOffset}
         popupClassName={cn('max-w-[300px] rounded-md px-3 py-2 system-xs-regular text-text-tertiary', popupClassName)}
       >
         {children}
diff --git a/web/features/agent-v2/agent-detail/configure/components/preview/header.tsx b/web/features/agent-v2/agent-detail/configure/components/preview/header.tsx
index 14f11ae2730..925578833fb 100644
--- a/web/features/agent-v2/agent-detail/configure/components/preview/header.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/preview/header.tsx
@@ -81,6 +81,8 @@ export function AgentPreviewHeader({
         </SegmentedControl>
         <Infotip
           aria-label={modeTip}
+          placement="bottom"
+          sideOffset={2}
           className="size-5 rounded-md"
           iconClassName="size-4 text-text-tertiary"
           popupClassName="w-60 max-w-60 rounded-xl bg-components-tooltip-bg px-4 py-3.5 text-start text-text-secondary backdrop-blur-[5px]"