diff --git a/change/@fluentui-react-infobutton-6eb516f4-2e97-48b6-94fe-3fa3c4261826.json b/change/@fluentui-react-infobutton-6eb516f4-2e97-48b6-94fe-3fa3c4261826.json
new file mode 100644
index 00000000000000..8f9e3778407650
--- /dev/null
+++ b/change/@fluentui-react-infobutton-6eb516f4-2e97-48b6-94fe-3fa3c4261826.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix(react-infobutton): Making InfoButton's PopoverSurface inline by default.",
+  "packageName": "@fluentui/react-infobutton",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-infobutton/etc/react-infobutton.api.md b/packages/react-components/react-infobutton/etc/react-infobutton.api.md
index 46b9efca38289a..058aa90c65acd8 100644
--- a/packages/react-components/react-infobutton/etc/react-infobutton.api.md
+++ b/packages/react-components/react-infobutton/etc/react-infobutton.api.md
@@ -25,6 +25,7 @@ export const infoButtonClassNames: SlotClassNames<InfoButtonSlots>;
 // @public
 export type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'disabled'> & {
     size?: 'small' | 'medium' | 'large';
+    inline?: boolean;
 };
 
 // @public (undocumented)
@@ -35,7 +36,7 @@ export type InfoButtonSlots = {
 };
 
 // @public
-export type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'size'>>;
+export type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'inline' | 'size'>>;
 
 // @public
 export const InfoLabel: ForwardRefComponent<InfoLabelProps>;
diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.types.ts b/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.types.ts
index ed230ae8c37db0..c2ef7cc064c8bf 100644
--- a/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.types.ts
+++ b/packages/react-components/react-infobutton/src/components/InfoButton/InfoButton.types.ts
@@ -25,9 +25,16 @@ export type InfoButtonProps = Omit<ComponentProps<Partial<InfoButtonSlots>>, 'di
    * @default medium
    */
   size?: 'small' | 'medium' | 'large';
+
+  /**
+   * Whether the InfoButton should be rendered inline or on a Portal.
+   *
+   * @default true
+   */
+  inline?: boolean;
 };
 
 /**
  * State used in rendering InfoButton
  */
-export type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'size'>>;
+export type InfoButtonState = ComponentState<InfoButtonSlots> & Required<Pick<InfoButtonProps, 'inline' | 'size'>>;
diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx
index c543d7a0b7fbfd..8388065c67bafe 100644
--- a/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx
+++ b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx
@@ -27,9 +27,10 @@ const popoverSizeMap = {
  * @param ref - reference to root HTMLElement of InfoButton
  */
 export const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HTMLElement>): InfoButtonState => {
-  const { size = 'medium' } = props;
+  const { size = 'medium', inline = true } = props;
 
   const state: InfoButtonState = {
+    inline,
     size,
 
     components: {
@@ -50,6 +51,7 @@ export const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HT
     ),
     popover: slot.always(props.popover, {
       defaultProps: {
+        inline,
         positioning: 'above-start',
         size: popoverSizeMap[size],
         withArrow: true,