diff --git a/packages/chip/README.md b/packages/chip/README.md
index e626376e61..eb7cc40d16 100644
--- a/packages/chip/README.md
+++ b/packages/chip/README.md
@@ -33,7 +33,6 @@ or
   baseFontSize={13}
   disabled
   onDismiss={() => {}}
-  popoverZIndex={1}
   chipCharacterLimit={10}
   chipTruncationLocation="end"
   dismissButtonAriaLabel="aria-label"
@@ -49,7 +48,6 @@ or
 | `label`                  | `React.ReactNode`                                                                    | Label rendered in the chip                                                                                                                                                                                                                                |                     |
 | `chipTruncationLocation` | `'end'` \| `'middle'` \| `'none'` \| `'start'`                                       | Defines where the ellipses will appear in a Chip when the label length exceeds the `chipCharacterLimit`. If `none` is passed, the chip will not truncate. **Note**: If there is any truncation, the full label text will appear inside a tooltip on hover | `none`              |
 | `chipCharacterLimit`     | `number`                                                                             | Defines the character limit of a Chip before they start truncating. **Note**: the three ellipses dots are included in the character limit and the chip will only truncate if the chip length is greater than the `chipCharacterLimit`.                    |                     |
-| `popoverZIndex`          | `number`                                                                             | Number that controls the z-index of the tooltip containing the full label text.                                                                                                                                                                           |                     |
 | `baseFontSize`           | `'13'` \| `'16'`                                                                     | Determines the base font-size of the chip.                                                                                                                                                                                                                |                     |
 | `variant`                | `'gray'` \| `'blue'` \| `'green'` \| `'purple'` \| `'red'` \| `'yellow'` \| `'blue'` | The color of the chip.                                                                                                                                                                                                                                    |                     |
 | `glyph`                  | `React.ReactElement`                                                                 | An icon glyph rendered before the text. To use a custom icon, see [Link](https://github.com/mongodb/leafygreen-ui/blob/main/packages/icon/README.md#usage-registering-custom-icon-sets) docs                                                              |                     |
diff --git a/packages/chip/src/Chip/Chip.spec.tsx b/packages/chip/src/Chip/Chip.spec.tsx
index c06de541d9..706db75e12 100644
--- a/packages/chip/src/Chip/Chip.spec.tsx
+++ b/packages/chip/src/Chip/Chip.spec.tsx
@@ -353,7 +353,6 @@ describe('packages/chip', () => {
         baseFontSize={13}
         disabled
         onDismiss={() => {}}
-        popoverZIndex={1}
         chipCharacterLimit={10}
         chipTruncationLocation="end"
         dismissButtonAriaLabel="deselect"
diff --git a/packages/chip/src/Chip/Chip.styles.ts b/packages/chip/src/Chip/Chip.styles.ts
index 99f6f81792..caa4a47248 100644
--- a/packages/chip/src/Chip/Chip.styles.ts
+++ b/packages/chip/src/Chip/Chip.styles.ts
@@ -329,3 +329,7 @@ export const getTextStyles = (
     [textDisabledStyles(theme)]: isDisabled,
     [textDismissibleStyles]: isDismissible,
   });
+
+export const inlineDefinitionStyles = css`
+  white-space: normal;
+`;
diff --git a/packages/chip/src/Chip/Chip.tsx b/packages/chip/src/Chip/Chip.tsx
index 858a7513ae..999eb069b8 100644
--- a/packages/chip/src/Chip/Chip.tsx
+++ b/packages/chip/src/Chip/Chip.tsx
@@ -14,6 +14,7 @@ import {
   chipTextClassName,
   getTextStyles,
   getWrapperStyles,
+  inlineDefinitionStyles,
 } from './Chip.styles';
 import { ChipProps, TruncationLocation, Variant } from './Chip.types';
 
@@ -28,7 +29,6 @@ export const Chip = React.forwardRef<HTMLSpanElement, ChipProps>(
       darkMode: darkModeProp,
       label,
       onDismiss,
-      popoverZIndex,
       className,
       dismissButtonAriaLabel,
       glyph,
@@ -82,8 +82,8 @@ export const Chip = React.forwardRef<HTMLSpanElement, ChipProps>(
               darkMode={darkMode}
               definition={label}
               align="bottom"
-              popoverZIndex={popoverZIndex}
               className={chipInlineDefinitionClassName}
+              tooltipClassName={inlineDefinitionStyles}
             >
               {truncatedName}
             </InlineDefinition>
@@ -111,7 +111,6 @@ Chip.propTypes = {
   label: PropTypes.string.isRequired,
   chipCharacterLimit: PropTypes.number,
   chipTruncationLocation: PropTypes.oneOf(Object.values(TruncationLocation)),
-  popoverZIndex: PropTypes.number,
   baseFontSize: PropTypes.oneOf(Object.values(BaseFontSize)),
   variant: PropTypes.oneOf(Object.values(Variant)),
   onDismiss: PropTypes.func,
diff --git a/packages/chip/src/Chip/Chip.types.ts b/packages/chip/src/Chip/Chip.types.ts
index 4c60a8315d..a2c903b164 100644
--- a/packages/chip/src/Chip/Chip.types.ts
+++ b/packages/chip/src/Chip/Chip.types.ts
@@ -43,11 +43,6 @@ export interface ChipProps
    */
   chipCharacterLimit?: number;
 
-  /**
-   * Number that controls the z-index of the tooltip containing the full label text.
-   */
-  popoverZIndex?: number;
-
   /**
    * Determines the base font-size of the component
    *
diff --git a/packages/code/README.md b/packages/code/README.md
index ce67888136..34e0383c74 100644
--- a/packages/code/README.md
+++ b/packages/code/README.md
@@ -119,11 +119,6 @@ const SomeComponent = () => <Code>{codeSnippet}</Code>;
 | `highlightLines`          | `Array<number` \| `[number, number]>`                                                                                                                                                                                                                                     | An optional array of lines to highlight. The array can only contain numbers corresponding to the line numbers to highlight, and / or tuples representing a range (e.g. `[6, 10]`);                                                              |         |
 | `languageOptions`         | `Array<LanguageOption>` (see below)                                                                                                                                                                                                                                       | An array of language options. When provided, a LanguageSwitcher dropdown is rendered.                                                                                                                                                           |         |
 | `onChange`                | `(language: LanguageOption) => void`                                                                                                                                                                                                                                      | A change handler triggered when the language is changed. Invalid when no `languageOptions` are provided                                                                                                                                         |         |
-| `usePortal`               | `boolean`                                                                                                                                                                                                                                                                 | Will position the language switcher dropdown relative to its parent without using a Portal if `usePortal` is set to false.                                                                                                                      | `true`  |
-| `portalContainer`         | `HTMLElement` \| `null`                                                                                                                                                                                                                                                   | Sets the container used for the language switcher's dropdown's portal.                                                                                                                                                                          |         |
-| `scrollContainer`         | `HTMLElement` \| `null`                                                                                                                                                                                                                                                   | If the language switcher's dropdown's portal has a scrollable ancestor other than the window, this prop allows passing a reference to that element to allow the portal to position properly.                                                    |         |
-| `portalClassName`         | `string`                                                                                                                                                                                                                                                                  | Passes the given className to the language switcher's dropdown's portal container if the default portal container is being used.                                                                                                                |         |
-| `popoverZIndex`           | `number`                                                                                                                                                                                                                                                                  | Sets the z-index CSS property for the language switcher's dropdown.                                                                                                                                                                             |         |
 
 ```
 interface LanguageOption {
diff --git a/packages/code/src/Code/Code.tsx b/packages/code/src/Code/Code.tsx
index 062054e4db..a57c262bbe 100644
--- a/packages/code/src/Code/Code.tsx
+++ b/packages/code/src/Code/Code.tsx
@@ -82,11 +82,6 @@ function Code({
   onChange,
   customActionButtons = [],
   showCustomActionButtons = false,
-  usePortal = true,
-  portalClassName,
-  portalContainer,
-  scrollContainer,
-  popoverZIndex,
   ...rest
 }: CodeProps) {
   const scrollableElementRef = useRef<HTMLPreElement>(null);
@@ -205,18 +200,6 @@ function Code({
     debounceScroll(e);
   };
 
-  const popoverProps = {
-    popoverZIndex,
-    ...(usePortal
-      ? {
-          usePortal,
-          portalClassName,
-          portalContainer,
-          scrollContainer,
-        }
-      : { usePortal }),
-  } as const;
-
   const showExpandButton = !!(
     expandable &&
     numOfLinesOfCode &&
@@ -286,7 +269,6 @@ function Code({
               isMultiline={isMultiline}
               customActionButtons={filteredCustomActionIconButtons}
               showCustomActionButtons={showCustomActionsInPanel}
-              {...popoverProps}
             />
           )}
 
diff --git a/packages/code/src/CopyButton/CopyButton.styles.ts b/packages/code/src/CopyButton/CopyButton.styles.ts
index 381fd9d61c..67b845f29c 100644
--- a/packages/code/src/CopyButton/CopyButton.styles.ts
+++ b/packages/code/src/CopyButton/CopyButton.styles.ts
@@ -2,6 +2,13 @@ import { css } from '@leafygreen-ui/emotion';
 import { Theme } from '@leafygreen-ui/lib';
 import { palette } from '@leafygreen-ui/palette';
 
+export const tooltipStyles = css`
+  svg {
+    width: 26px;
+    height: 26px;
+  }
+`;
+
 export const copiedThemeStyle: Record<Theme, string> = {
   [Theme.Light]: css`
     color: ${palette.white};
diff --git a/packages/code/src/CopyButton/CopyButton.tsx b/packages/code/src/CopyButton/CopyButton.tsx
index 01a73ea23a..6c4f640e64 100644
--- a/packages/code/src/CopyButton/CopyButton.tsx
+++ b/packages/code/src/CopyButton/CopyButton.tsx
@@ -12,10 +12,14 @@ import {
   usePopoverContext,
 } from '@leafygreen-ui/leafygreen-provider';
 import { keyMap } from '@leafygreen-ui/lib';
-import Tooltip, { Align, Justify } from '@leafygreen-ui/tooltip';
+import Tooltip, { Align, Justify, RenderMode } from '@leafygreen-ui/tooltip';
 
 import { COPIED_SUCCESS_DURATION, COPIED_TEXT, COPY_TEXT } from './constants';
-import { copiedThemeStyle, copyButtonThemeStyles } from './CopyButton.styles';
+import {
+  copiedThemeStyle,
+  copyButtonThemeStyles,
+  tooltipStyles,
+} from './CopyButton.styles';
 import { CopyProps } from './CopyButton.types';
 
 function CopyButton({ onCopy, contents }: CopyProps) {
@@ -109,11 +113,13 @@ function CopyButton({ onCopy, contents }: CopyProps) {
 
   return (
     <Tooltip
+      align={Align.Top}
+      className={tooltipStyles}
       data-testid="code_copy-button_tooltip"
+      justify={Justify.Middle}
       open={open}
+      renderMode={RenderMode.TopLayer}
       setOpen={setOpen}
-      align={Align.Top}
-      justify={Justify.Middle}
       trigger={
         <IconButton
           data-testid="code_copy-button"
diff --git a/packages/code/src/LanguageSwitcher/LanguageSwitcher.tsx b/packages/code/src/LanguageSwitcher/LanguageSwitcher.tsx
index 127e921ba6..efadb13450 100644
--- a/packages/code/src/LanguageSwitcher/LanguageSwitcher.tsx
+++ b/packages/code/src/LanguageSwitcher/LanguageSwitcher.tsx
@@ -7,10 +7,10 @@ import FileIcon from '@leafygreen-ui/icon/dist/File';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { isComponentType } from '@leafygreen-ui/lib';
 import { palette } from '@leafygreen-ui/palette';
-import { Option, Select } from '@leafygreen-ui/select';
+import { Option, RenderMode, Select } from '@leafygreen-ui/select';
 
 import { CustomSelectMenuButton } from '../CustomSelectMenuButton';
-import { LanguageOption, PopoverProps } from '../types';
+import { LanguageOption } from '../types';
 
 import {
   buttonModeStyle,
@@ -28,22 +28,13 @@ function isLeafyGreenIcon(element: React.ReactNode) {
   return false;
 }
 
-interface Props extends PopoverProps {
+interface Props {
   language: LanguageOption;
   languageOptions: Array<LanguageOption>;
   onChange: (arg0: LanguageOption) => void;
 }
 
-function LanguageSwitcher({
-  language,
-  languageOptions,
-  onChange,
-  usePortal,
-  portalClassName,
-  portalContainer,
-  scrollContainer,
-  popoverZIndex,
-}: Props) {
+function LanguageSwitcher({ language, languageOptions, onChange }: Props) {
   const { theme, darkMode } = useDarkMode();
   const previousLanguage = usePrevious(language);
 
@@ -83,14 +74,6 @@ function LanguageSwitcher({
     }
   }
 
-  const popoverProps = {
-    popoverZIndex,
-    usePortal,
-    portalClassName,
-    portalContainer,
-    scrollContainer,
-  } as const;
-
   return (
     <div className={containerStyle}>
       <Select
@@ -100,7 +83,7 @@ function LanguageSwitcher({
         value={language?.displayName}
         className={selectStyle}
         allowDeselect={false}
-        {...popoverProps}
+        renderMode={RenderMode.TopLayer}
         __INTERNAL__menuButtonSlot__={CustomSelectMenuButton}
         __INTERNAL__menuButtonSlotProps__={{
           className: cx(menuButtonStyle, buttonModeStyle[theme]),
diff --git a/packages/code/src/Panel/Panel.tsx b/packages/code/src/Panel/Panel.tsx
index 91cef20589..dd15e86557 100644
--- a/packages/code/src/Panel/Panel.tsx
+++ b/packages/code/src/Panel/Panel.tsx
@@ -8,7 +8,6 @@ import LanguageSwitcher from '../LanguageSwitcher/LanguageSwitcher';
 import {
   LanguageOption,
   LanguageSwitcher as LanguageSwitcherProps,
-  PopoverProps,
 } from '../types';
 
 import {
@@ -27,7 +26,7 @@ type PanelProps = Partial<Omit<LanguageSwitcherProps, 'language'>> & {
   customActionButtons?: Array<React.ReactElement>;
   showCustomActionButtons?: boolean;
   className?: string;
-} & PopoverProps;
+};
 
 function Panel({
   language,
@@ -38,23 +37,10 @@ function Panel({
   showCopyButton,
   customActionButtons,
   showCustomActionButtons,
-  usePortal,
-  portalClassName,
-  portalContainer,
-  scrollContainer,
-  popoverZIndex,
   className,
 }: PanelProps) {
   const { theme } = useDarkMode();
 
-  const popoverProps = {
-    popoverZIndex,
-    usePortal,
-    portalClassName,
-    portalContainer,
-    scrollContainer,
-  } as const;
-
   return (
     <div
       className={cx(
@@ -75,7 +61,6 @@ function Panel({
             onChange={onChange}
             language={language}
             languageOptions={languageOptions}
-            {...popoverProps}
           />
         )}
 
diff --git a/packages/code/src/types.ts b/packages/code/src/types.ts
index 650c1d10ae..a56164b2c9 100644
--- a/packages/code/src/types.ts
+++ b/packages/code/src/types.ts
@@ -52,36 +52,6 @@ export interface SyntaxProps extends HTMLElementProps<'code'> {
   highlightLines?: LineHighlightingDefinition;
 }
 
-export interface PopoverProps {
-  /**
-   * Specifies that the popover content should be rendered at the end of the DOM,
-   * rather than in the DOM tree.
-   *
-   * default: `true`
-   */
-  usePortal?: boolean;
-
-  /**
-   * When usePortal is `true`, specifies a class name to apply to the root element of the portal.
-   */
-  portalClassName?: string;
-
-  /**
-   * When usePortal is `true`, specifies an element to portal within. The default behavior is to generate a div at the end of the document to render within.
-   */
-  portalContainer?: HTMLElement | null;
-
-  /**
-   * When usePortal is `true`, specifies the scrollable element to position relative to.
-   */
-  scrollContainer?: HTMLElement | null;
-
-  /**
-   * Number that controls the z-index of the popover element directly.
-   */
-  popoverZIndex?: number;
-}
-
 export type CodeProps = Omit<
   SyntaxProps,
   'onCopy' | 'language' | 'onChange'
@@ -160,8 +130,7 @@ export type CodeProps = Omit<
          */
         onChange: (arg0: LanguageOption) => void;
       }
-  ) &
-  PopoverProps;
+  );
 
 export interface LanguageOption {
   displayName: string;
@@ -169,7 +138,7 @@ export interface LanguageOption {
   image?: React.ReactElement;
 }
 
-export interface LanguageSwitcher extends PopoverProps {
+export interface LanguageSwitcher {
   onChange: (arg0: LanguageOption) => void;
   language: LanguageOption['displayName'];
   languageOptions: Array<LanguageOption>;
diff --git a/packages/combobox/README.md b/packages/combobox/README.md
index ee02b08710..5d25d53301 100644
--- a/packages/combobox/README.md
+++ b/packages/combobox/README.md
@@ -78,7 +78,7 @@ import { Combobox, ComboboxOption } from '@leafygreen-ui/combobox';
 ## Properties
 
 | Prop                     | Type                                          | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Default                           |
-| ------------------------ | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
+| ------------------------ | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------ |
 | `children`               | `<ComboboxOption>`, `<ComboboxGroup>`         | Define the Combobox Options by passing children                                                                                                                                                                                                                                                                                                                                                                                                                     |                                   |
 | `multiselect`            | `boolean`                                     | Defines whether a user can select multiple options, or only a single option. When using TypeScript, `multiselect` affects the valid values of `initialValue`, `value`, and `onChange`                                                                                                                                                                                                                                                                               | `false`                           |
 | `initialValue`           | `Array<string>`, `string`                     | The initial selection. Must be a string (or array of strings) that matches the `value` prop of a `ComboboxOption`. Changing the `initialValue` after initial render will not change the selection.                                                                                                                                                                                                                                                                  |                                   |
@@ -106,7 +106,7 @@ import { Combobox, ComboboxOption } from '@leafygreen-ui/combobox';
 | `chipTruncationLocation` | `'start'`, `'middle'`, `'end'`, `'none'`      | Defines where the ellipses appear in a Chip when the length exceeds the `chipCharacterLimit`                                                                                                                                                                                                                                                                                                                                                                        | 'none'                            |
 | `chipCharacterLimit`     | `number`                                      | Defined the character limit of a multiselect Chip before they start truncating. Note: the three ellipses dots are included in the character limit.                                                                                                                                                                                                                                                                                                                  | 12                                |
 | `className`              | `string`                                      | The className passed to the root element of the component.                                                                                                                                                                                                                                                                                                                                                                                                          |                                   |
-| `usePortal`              | `boolean`                                     | Will position Popover's children relative to its parent without using a Portal, if `usePortal` is set to false. NOTE: The parent element should be CSS position `relative`, `fixed`, or `absolute` if using this option.                                                                                                                                                                                                                                            | `true`                            |
+| `renderMode`             | `'inline'` \| `'portal'` \| `'top-layer'`     | Options to render the popover element <br> \* [deprecated] `'inline'` will render the popover element inline in the DOM where it's written <br> \* [deprecated] `'portal'` will render the popover element in a new div appended to the body. Alternatively, can be portaled into a provided `portalContainer` <br> \* `'top-layer'` will render the popover element in the top layer                                                                               | `'top-layer'`                     | `true` |
 | `portalContainer`        | `HTMLElement` \| `null`                       | Sets the container used for the popover's portal.                                                                                                                                                                                                                                                                                                                                                                                                                   |                                   |
 | `scrollContainer`        | `HTMLElement` \| `null`                       | If the popover portal has a scrollable ancestor other than the window, this prop allows passing a reference to that element to allow the portal to position properly.                                                                                                                                                                                                                                                                                               |                                   |
 | `portalClassName`        | `string`                                      | Passes the given className to the popover's portal container if the default portal container is being used.                                                                                                                                                                                                                                                                                                                                                         |                                   |
diff --git a/packages/combobox/src/Combobox/Combobox.spec.tsx b/packages/combobox/src/Combobox/Combobox.spec.tsx
index 792af32979..f88ccecd08 100644
--- a/packages/combobox/src/Combobox/Combobox.spec.tsx
+++ b/packages/combobox/src/Combobox/Combobox.spec.tsx
@@ -16,6 +16,7 @@ import isUndefined from 'lodash/isUndefined';
 
 import Button from '@leafygreen-ui/button';
 import { keyMap } from '@leafygreen-ui/lib';
+import { RenderMode } from '@leafygreen-ui/popover';
 import { eventContainingTargetValue } from '@leafygreen-ui/testing-lib';
 
 import { OptionObject } from '../ComboboxOption/ComboboxOption.types';
@@ -35,9 +36,12 @@ import {
 describe('packages/combobox', () => {
   describe('A11y', () => {
     test('does not have basic accessibility violations', async () => {
-      const { container, openMenu } = renderCombobox();
-      openMenu();
+      const { container, openMenu } = renderCombobox('single', {
+        renderMode: 'portal',
+      });
+      const { menuContainerEl } = openMenu();
       await waitFor(async () => {
+        expect(menuContainerEl).toBeVisible();
         const results = await axe(container);
         expect(results).toHaveNoViolations();
       });
@@ -74,6 +78,7 @@ describe('packages/combobox', () => {
       document.body.appendChild(portalContainer);
       const portalRef = createRef<HTMLElement>();
       const { openMenu } = renderCombobox(select, {
+        renderMode: RenderMode.Portal,
         portalContainer,
         portalRef,
       });
@@ -802,7 +807,7 @@ describe('packages/combobox', () => {
       });
 
       describe('Click clear button', () => {
-        test('Clicking clear all button clears selection', () => {
+        test('Clicking clear all button clears selection', async () => {
           const initialValue =
             select === 'single' ? 'apple' : ['apple', 'banana', 'carrot'];
           const { inputEl, clearButtonEl, queryAllChips } = renderCombobox(
@@ -818,7 +823,7 @@ describe('packages/combobox', () => {
           if (select === 'multiple') {
             expect(queryAllChips()).toHaveLength(0);
           } else {
-            expect(inputEl).toHaveValue('');
+            await waitFor(() => expect(inputEl).toHaveValue(''));
           }
         });
       });
diff --git a/packages/combobox/src/Combobox/Combobox.tsx b/packages/combobox/src/Combobox/Combobox.tsx
index c5f31d11a5..4d530ce470 100644
--- a/packages/combobox/src/Combobox/Combobox.tsx
+++ b/packages/combobox/src/Combobox/Combobox.tsx
@@ -32,9 +32,15 @@ import {
 import Icon from '@leafygreen-ui/icon';
 import IconButton from '@leafygreen-ui/icon-button';
 import LeafyGreenProvider, {
+  PopoverProvider,
   useDarkMode,
 } from '@leafygreen-ui/leafygreen-provider';
 import { consoleOnce, isComponentType, keyMap } from '@leafygreen-ui/lib';
+import {
+  DismissMode,
+  getPopoverRenderModeProps,
+  RenderMode,
+} from '@leafygreen-ui/popover';
 import { Description, Label } from '@leafygreen-ui/typography';
 
 import { ComboboxChip } from '../ComboboxChip';
@@ -128,7 +134,7 @@ export function Combobox<M extends boolean>({
   chipTruncationLocation,
   chipCharacterLimit = 12,
   className,
-  usePortal = true,
+  renderMode = RenderMode.TopLayer,
   portalClassName,
   portalContainer,
   portalRef,
@@ -1156,15 +1162,14 @@ export function Combobox<M extends boolean>({
 
   const popoverProps = {
     popoverZIndex,
-    ...(usePortal
-      ? {
-          usePortal,
-          portalClassName,
-          portalContainer,
-          portalRef,
-          scrollContainer,
-        }
-      : { usePortal }),
+    ...getPopoverRenderModeProps({
+      dismissMode: DismissMode.Manual,
+      portalClassName,
+      portalContainer,
+      portalRef,
+      renderMode,
+      scrollContainer,
+    }),
   } as const;
 
   const formFieldFeedbackProps = {
@@ -1321,19 +1326,20 @@ export function Combobox<M extends boolean>({
           *  Menu  *
           / *******/}
 
-          <ComboboxMenu
-            id={menuId}
-            labelId={labelId}
-            refEl={comboboxRef}
-            ref={menuRef}
-            menuWidth={menuWidth}
-            searchLoadingMessage={searchLoadingMessage}
-            searchErrorMessage={searchErrorMessage}
-            searchEmptyMessage={searchEmptyMessage}
-            {...popoverProps}
-          >
-            {renderedOptionsJSX}
-          </ComboboxMenu>
+          <PopoverProvider {...popoverProps}>
+            <ComboboxMenu
+              id={menuId}
+              labelId={labelId}
+              refEl={comboboxRef}
+              ref={menuRef}
+              menuWidth={menuWidth}
+              searchLoadingMessage={searchLoadingMessage}
+              searchErrorMessage={searchErrorMessage}
+              searchEmptyMessage={searchEmptyMessage}
+            >
+              {renderedOptionsJSX}
+            </ComboboxMenu>
+          </PopoverProvider>
         </div>
       </ComboboxContext.Provider>
     </LeafyGreenProvider>
@@ -1426,7 +1432,7 @@ Combobox.propTypes = {
   filteredOptions: PropTypes.arrayOf(PropTypes.string),
   // Popover Props
   popoverZIndex: PropTypes.number,
-  usePortal: PropTypes.bool,
+  renderMode: PropTypes.oneOf(Object.values(RenderMode)),
   scrollContainer: PropTypes.elementType,
   portalContainer: PropTypes.elementType,
   portalRef: PropTypes.shape({
diff --git a/packages/combobox/src/Combobox/Combobox.types.ts b/packages/combobox/src/Combobox/Combobox.types.ts
index af5b29bbc4..f247537e26 100644
--- a/packages/combobox/src/Combobox/Combobox.types.ts
+++ b/packages/combobox/src/Combobox/Combobox.types.ts
@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 
 import { type ChipProps } from '@leafygreen-ui/chip';
 import { Either, HTMLElementProps } from '@leafygreen-ui/lib';
-import { PopoverRenderModeProps } from '@leafygreen-ui/popover';
+import { PopoverProps } from '@leafygreen-ui/popover';
 
 import {
   ComboboxSize,
@@ -56,11 +56,19 @@ export interface ComboboxMultiselectProps<M extends boolean> {
 
 type PartialChipProps = Pick<
   ChipProps,
-  'chipTruncationLocation' | 'chipCharacterLimit' | 'popoverZIndex'
+  'chipTruncationLocation' | 'chipCharacterLimit'
 >;
 
 export type BaseComboboxProps = Omit<HTMLElementProps<'div'>, 'onChange'> &
-  PopoverRenderModeProps &
+  Pick<
+    PopoverProps,
+    | 'popoverZIndex'
+    | 'portalClassName'
+    | 'portalContainer'
+    | 'portalRef'
+    | 'renderMode'
+    | 'scrollContainer'
+  > &
   PartialChipProps & {
     /**
      * Defines the Combobox Options by passing children. Must be `ComboboxOption` or `ComboboxGroup`
diff --git a/packages/combobox/src/ComboboxChip/ComboboxChip.tsx b/packages/combobox/src/ComboboxChip/ComboboxChip.tsx
index 0c5a52828b..b5569ebfd7 100644
--- a/packages/combobox/src/ComboboxChip/ComboboxChip.tsx
+++ b/packages/combobox/src/ComboboxChip/ComboboxChip.tsx
@@ -25,7 +25,6 @@ export const ComboboxChip = React.forwardRef<
       overflow,
       chipTruncationLocation = TruncationLocation.End,
       chipCharacterLimit = 12,
-      popoverZIndex,
     } = useContext(ComboboxContext);
 
     const updatedChipTruncationLocation =
@@ -80,7 +79,6 @@ export const ComboboxChip = React.forwardRef<
         baseFontSize={BaseFontSize.Body1}
         chipCharacterLimit={chipCharacterLimit}
         chipTruncationLocation={updatedChipTruncationLocation}
-        popoverZIndex={popoverZIndex}
         variant={Variant.Gray}
         ref={chipRef}
         disabled={disabled}
diff --git a/packages/combobox/src/ComboboxMenu/ComboboxMenu.tsx b/packages/combobox/src/ComboboxMenu/ComboboxMenu.tsx
index b5c25f8783..b70ef432e0 100644
--- a/packages/combobox/src/ComboboxMenu/ComboboxMenu.tsx
+++ b/packages/combobox/src/ComboboxMenu/ComboboxMenu.tsx
@@ -6,7 +6,7 @@ import { useAvailableSpace, useForwardedRef } from '@leafygreen-ui/hooks';
 import Icon from '@leafygreen-ui/icon';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { palette } from '@leafygreen-ui/palette';
-import Popover, { PopoverRenderModeProps } from '@leafygreen-ui/popover';
+import Popover from '@leafygreen-ui/popover';
 import { Error } from '@leafygreen-ui/typography';
 
 import { ComboboxProps } from '../Combobox';
@@ -30,14 +30,10 @@ type ComboboxMenuProps = {
   id: string;
   labelId: string;
   menuWidth: number;
-} & PopoverRenderModeProps &
-  Pick<
-    ComboboxProps<any>,
-    | 'searchLoadingMessage'
-    | 'searchErrorMessage'
-    | 'searchEmptyMessage'
-    | 'popoverZIndex'
-  >;
+} & Pick<
+  ComboboxProps<any>,
+  'searchLoadingMessage' | 'searchErrorMessage' | 'searchEmptyMessage'
+>;
 
 export const ComboboxMenu = React.forwardRef<HTMLDivElement, ComboboxMenuProps>(
   (
@@ -50,7 +46,6 @@ export const ComboboxMenu = React.forwardRef<HTMLDivElement, ComboboxMenuProps>(
       searchLoadingMessage,
       searchErrorMessage,
       searchEmptyMessage,
-      ...popoverProps
     }: ComboboxMenuProps,
     forwardedRef,
   ) => {
@@ -140,7 +135,6 @@ export const ComboboxMenu = React.forwardRef<HTMLDivElement, ComboboxMenuProps>(
         refEl={refEl}
         adjustOnMutation={true}
         className={cx(popoverStyle(menuWidth), popoverThemeStyle[theme])}
-        {...popoverProps}
       >
         <div
           ref={ref}
diff --git a/packages/copyable/README.md b/packages/copyable/README.md
index b9b0480e00..aceb90d755 100644
--- a/packages/copyable/README.md
+++ b/packages/copyable/README.md
@@ -77,13 +77,12 @@ npm install @leafygreen-ui/copyable
 
 ## Properties
 
-| Prop                     | Type                   | Description                                                       | Default     |
-| ------------------------ | ---------------------- | ----------------------------------------------------------------- | ----------- |
-| `label`                  | `string`               | Label text for the copyable contents.                             |             |
-| `description`            | `string`               | Further text to describe the contents.                            | `undefined` |
-| `className`              | `string`               | className applied to the container of the code element            |             |
-| `children`               | `string`               | The text that will be copied.                                     |             |
-| `darkMode`               | `boolean`              | Determines whether or not the component appears in dark mode.     | `false`     |
-| `size`                   | `'default'`, `'large'` | The display size of the label, description, and copyable children | `'default'` |
-| `copyable`               | `boolean`              | Whether or not a copy button should be shown.                     | `true`      |
-| `shouldTooltipUsePortal` | `boolean`              | Whether or not the "Copied!" tooltip should use a React portal    | `true`      |
+| Prop          | Type                   | Description                                                       | Default     |
+| ------------- | ---------------------- | ----------------------------------------------------------------- | ----------- |
+| `label`       | `string`               | Label text for the copyable contents.                             |             |
+| `description` | `string`               | Further text to describe the contents.                            | `undefined` |
+| `className`   | `string`               | className applied to the container of the code element            |             |
+| `children`    | `string`               | The text that will be copied.                                     |             |
+| `darkMode`    | `boolean`              | Determines whether or not the component appears in dark mode.     | `false`     |
+| `size`        | `'default'`, `'large'` | The display size of the label, description, and copyable children | `'default'` |
+| `copyable`    | `boolean`              | Whether or not a copy button should be shown.                     | `true`      |
diff --git a/packages/copyable/src/Copyable.stories.tsx b/packages/copyable/src/Copyable.stories.tsx
index 2075600016..25c88ff42e 100644
--- a/packages/copyable/src/Copyable.stories.tsx
+++ b/packages/copyable/src/Copyable.stories.tsx
@@ -29,7 +29,6 @@ const meta: StoryMetaType<typeof Copyable> = {
   },
   args: {
     copyable: true,
-    shouldTooltipUsePortal: true,
     darkMode: false,
     label: 'Label',
     description: 'Description',
@@ -39,7 +38,6 @@ const meta: StoryMetaType<typeof Copyable> = {
     copyable: { control: 'boolean' },
     label: { control: 'text' },
     description: { control: 'text' },
-    shouldTooltipUsePortal: { control: 'boolean' },
     children: storybookArgTypes.children,
     darkMode: storybookArgTypes.darkMode,
   },
diff --git a/packages/copyable/src/Copyable/Copyable.tsx b/packages/copyable/src/Copyable/Copyable.tsx
index 51e7bc3b62..2034e638dd 100644
--- a/packages/copyable/src/Copyable/Copyable.tsx
+++ b/packages/copyable/src/Copyable/Copyable.tsx
@@ -11,7 +11,12 @@ import {
   usePopoverContext,
 } from '@leafygreen-ui/leafygreen-provider';
 import { BaseFontSize } from '@leafygreen-ui/tokens';
-import Tooltip, { Align, Justify, TriggerEvent } from '@leafygreen-ui/tooltip';
+import Tooltip, {
+  Align,
+  Justify,
+  RenderMode,
+  TriggerEvent,
+} from '@leafygreen-ui/tooltip';
 import {
   Description,
   Label,
@@ -45,7 +50,6 @@ export default function Copyable({
   description,
   label,
   onCopy,
-  shouldTooltipUsePortal = true,
   size: SizeProp,
 }: CopyableProps) {
   const { theme, darkMode } = useDarkMode(darkModeProp);
@@ -183,7 +187,7 @@ export default function Copyable({
                 </Button>
               }
               triggerEvent={TriggerEvent.Click}
-              usePortal={shouldTooltipUsePortal}
+              renderMode={RenderMode.TopLayer}
             >
               Copied!
             </Tooltip>
@@ -204,5 +208,4 @@ Copyable.propTypes = {
   description: PropTypes.string,
   className: PropTypes.string,
   copyable: PropTypes.bool,
-  shouldTooltipUsePortal: PropTypes.bool,
 };
diff --git a/packages/copyable/src/Copyable/Copyable.types.ts b/packages/copyable/src/Copyable/Copyable.types.ts
index f232fb2c9e..ea8f065238 100644
--- a/packages/copyable/src/Copyable/Copyable.types.ts
+++ b/packages/copyable/src/Copyable/Copyable.types.ts
@@ -35,10 +35,5 @@ export interface CopyableProps extends HTMLElementProps<'div'> {
 
   size?: Size;
 
-  /**
-   * If `true`, the tooltip rendered as feedback when the user clicks the copy button will be rendered using a portal
-   */
-  shouldTooltipUsePortal?: boolean;
-
   children: string;
 }
diff --git a/packages/date-picker/README.md b/packages/date-picker/README.md
index 152a16480d..ca3cffe2ce 100644
--- a/packages/date-picker/README.md
+++ b/packages/date-picker/README.md
@@ -61,7 +61,7 @@ const [date, setDate] = useState<Date>();
 
 ## Popover Props
 
-Date Picker extends [Popover props](https://www.mongodb.design/component/popover/documentation/) but omits the following props: `usePortal`, `refEl`, `children`, `className`, `onClick`, and `active`.
+Date Picker extends [Popover props](https://www.mongodb.design/component/popover/documentation/) but omits the following props: `active`, `children`, `className`, `dismissMode`, `onClick`, `onToggle`, `popoverZIndex`, `portalClassName`, `portalContainer`, `portalRef`, `refEl`, `renderMode`, and `scrollContainer`.
 
 ## 🔎 Glossary
 
diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
index 1990dfdc3c..71767988aa 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx
@@ -1,4 +1,4 @@
-import React, { createRef } from 'react';
+import React from 'react';
 import {
   fireEvent,
   render,
@@ -408,27 +408,6 @@ describe('packages/date-picker', () => {
         expect(menuContainerEl).toBeInTheDocument();
       });
 
-      test('appends to the end of the DOM', async () => {
-        const { findMenuElements, container } = renderDatePicker({
-          initialOpen: true,
-        });
-        const { menuContainerEl } = await findMenuElements();
-        expect(container).not.toContain(menuContainerEl);
-      });
-
-      test('accepts a portalRef', () => {
-        const portalContainer = document.createElement('div');
-        document.body.appendChild(portalContainer);
-        const portalRef = createRef<HTMLElement>();
-        renderDatePicker({
-          initialOpen: true,
-          portalContainer,
-          portalRef,
-        });
-        expect(portalRef.current).toBeDefined();
-        expect(portalRef.current).toBe(portalContainer);
-      });
-
       test('menu is initially closed when rendered with `initialOpen` and `disabled`', async () => {
         const { findMenuElements } = renderDatePicker({
           initialOpen: true,
@@ -3669,9 +3648,6 @@ describe('packages/date-picker', () => {
       {/* @ts-expect-error - needs label/aria-label/aria-labelledby */}
       <DatePicker />
 
-      {/* @ts-expect-error - does not accept usePortal prop */}
-      <DatePicker usePortal />
-
       <DatePicker label="Pick a date" />
       <DatePicker aria-label="Pick a date" />
       <DatePicker aria-labelledby="Pick a date" />
@@ -3694,14 +3670,10 @@ describe('packages/date-picker', () => {
         initialOpen={false}
         autoComplete="off"
         darkMode={false}
-        portalClassName=""
-        scrollContainer={{} as HTMLElement}
-        portalContainer={{} as HTMLElement}
         align="bottom"
         justify="start"
         spacing={10}
         adjustOnMutation={true}
-        popoverZIndex={1}
         onEnter={() => {}}
         onEntering={() => {}}
         onEntered={() => {}}
diff --git a/packages/date-picker/src/DatePicker/DatePicker.tsx b/packages/date-picker/src/DatePicker/DatePicker.tsx
index 6917a3ffe8..43da9e94b0 100644
--- a/packages/date-picker/src/DatePicker/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker/DatePicker.tsx
@@ -96,22 +96,4 @@ DatePicker.propTypes = {
   initialOpen: PropTypes.bool,
   autoComplete: PropTypes.oneOf(Object.values(AutoComplete)),
   darkMode: PropTypes.bool,
-  // Popover Props
-  popoverZIndex: PropTypes.number,
-  portalContainer:
-    typeof window !== 'undefined'
-      ? PropTypes.instanceOf(Element)
-      : PropTypes.any,
-  /// @ts-expect-error Types of property '[nominalTypeHack]' are incompatible.
-  portalRef: PropTypes.shape({
-    current:
-      typeof window !== 'undefined'
-        ? PropTypes.instanceOf(Element)
-        : PropTypes.any,
-  }),
-  scrollContainer:
-    typeof window !== 'undefined'
-      ? PropTypes.instanceOf(Element)
-      : PropTypes.any,
-  portalClassName: PropTypes.string,
 };
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
index d5a82e9ce2..b5533dafe0 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -301,7 +301,6 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
         spacing={spacing[1]}
         data-today={today.toISOString()}
         className={menuWrapperStyles}
-        usePortal
         onKeyDown={handleMenuKeyPress}
         onTransitionEnd={handleMenuTransitionEntered}
         onExited={handleMenuTransitionExited}
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
index 29b4c8f80e..d1bfed1f94 100644
--- a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
+++ b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.types.ts
@@ -3,6 +3,14 @@ import { PopoverProps } from '@leafygreen-ui/popover';
 
 export type DatePickerMenuProps = Omit<
   PopoverProps,
-  'children' | 'renderMode' | 'usePortal'
+  | 'children'
+  | 'dismissMode'
+  | 'onToggle'
+  | 'popoverZIndex'
+  | 'portalClassName'
+  | 'portalContainer'
+  | 'portalRef'
+  | 'renderMode'
+  | 'scrollContainer'
 > &
   HTMLElementProps<'div'>;
diff --git a/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx b/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx
index 1bf7e26a6b..320fce2a8a 100644
--- a/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx
+++ b/packages/date-picker/src/shared/components/MenuWrapper/MenuWrapper.tsx
@@ -6,13 +6,24 @@ import {
   useDarkMode,
 } from '@leafygreen-ui/leafygreen-provider';
 import { HTMLElementProps } from '@leafygreen-ui/lib';
-import Popover, { PopoverProps } from '@leafygreen-ui/popover';
+import Popover, {
+  DismissMode,
+  PopoverProps,
+  RenderMode,
+} from '@leafygreen-ui/popover';
 
 import { menuStyles } from './MenuWrapper.styles';
 
 export type MenuWrapperProps = Omit<
   PopoverProps,
-  'dismissMode' | 'onToggle' | 'renderMode'
+  | 'dismissMode'
+  | 'onToggle'
+  | 'popoverZIndex'
+  | 'portalClassName'
+  | 'portalContainer'
+  | 'portalRef'
+  | 'renderMode'
+  | 'scrollContainer'
 > &
   HTMLElementProps<'div'>;
 
@@ -28,7 +39,8 @@ export const MenuWrapper = forwardRef<HTMLDivElement, MenuWrapperProps>(
         ref={fwdRef}
         className={cx(menuStyles[theme], className)}
         {...props}
-        usePortal
+        dismissMode={DismissMode.Manual}
+        renderMode={RenderMode.TopLayer}
       >
         {/*
          * Prevents the opening and closing state of a select dropdown from propagating up
diff --git a/packages/date-picker/src/shared/constants.ts b/packages/date-picker/src/shared/constants.ts
index 96f78df967..84a2ad0eb1 100644
--- a/packages/date-picker/src/shared/constants.ts
+++ b/packages/date-picker/src/shared/constants.ts
@@ -1,4 +1,5 @@
 import { Month } from '@leafygreen-ui/date-utils';
+import { DismissMode, RenderMode } from '@leafygreen-ui/popover';
 import { DropdownWidthBasis } from '@leafygreen-ui/select';
 
 /**
@@ -78,7 +79,6 @@ export const selectElementProps = {
   size: 'xsmall',
   allowDeselect: false,
   dropdownWidthBasis: DropdownWidthBasis.Option,
-  // using no portal so the select menus are included in the backdrop "foreground"
-  // there is currently no way to pass a ref into the Select portal to use in backdrop "foreground"
-  usePortal: false,
+  dismissMode: DismissMode.Auto,
+  renderMode: RenderMode.TopLayer,
 } as const;
diff --git a/packages/date-picker/src/shared/context/SharedDatePickerContext.utils.ts b/packages/date-picker/src/shared/context/SharedDatePickerContext.utils.ts
index b6a9461c14..fe3ebff2ec 100644
--- a/packages/date-picker/src/shared/context/SharedDatePickerContext.utils.ts
+++ b/packages/date-picker/src/shared/context/SharedDatePickerContext.utils.ts
@@ -30,15 +30,10 @@ export type ContextPropKeys = keyof SharedDatePickerProviderProps &
  * Prop names that are extended from popoverProps
  * */
 export const modifiedPopoverPropNames: Array<ModifiedPopoverPropkeys> = [
-  'scrollContainer',
-  'portalContainer',
-  'portalRef',
-  'portalClassName',
   'align',
   'justify',
   'spacing',
   'adjustOnMutation',
-  'popoverZIndex',
   'onEnter',
   'onEntering',
   'onEntered',
diff --git a/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts b/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts
index bef824b244..47ee0057e7 100644
--- a/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts
+++ b/packages/date-picker/src/shared/types/BaseDatePickerProps.types.ts
@@ -8,13 +8,19 @@ import { AutoComplete, DatePickerState } from './types';
 
 export type ModifiedPopoverProps = Omit<
   PopoverProps,
-  | 'usePortal'
-  | 'refEl'
+  | 'active'
   | 'children'
   | 'className'
-  | 'active'
+  | 'dismissMode'
   | 'onClick'
+  | 'onToggle'
+  | 'popoverZIndex'
+  | 'portalClassName'
+  | 'portalContainer'
+  | 'portalRef'
+  | 'refEl'
   | 'renderMode'
+  | 'scrollContainer'
 >;
 
 export type BaseDatePickerProps = {
diff --git a/packages/guide-cue/README.md b/packages/guide-cue/README.md
index d58ccd6949..49cdbb376d 100644
--- a/packages/guide-cue/README.md
+++ b/packages/guide-cue/README.md
@@ -96,8 +96,4 @@ The variant that is shown depends on the number of steps. If `numberOfSteps > 1`
 | `tooltipAlign`         | `'top'` \| `'bottom'` \| `'left'` \| `'right'`                                                 | Determines the alignment of the tooltip.                                                                                                                                                                                                                                   | `top`                  |
 | `tooltipJustify`       | `'start'` \| `'middle'` \| `'end'`                                                             | Determines the justification of the tooltip.                                                                                                                                                                                                                               | `middle`               |
 | `beaconAlign`          | `'top'` \| `'bottom'` \| `'left'` \| `'right'` \| `'center-horizontal'` \| `'center-vertical'` | Determines the alignment of the beacon(animated pulsing circle that appears on top of the trigger element). This only applies to the multi-step tooltip.                                                                                                                   | `center-horizontal`    |
-| `portalContainer`      | `HTMLElement` \| `null`                                                                        | Sets the container used for the popover's portal. NOTE: If using a `scrollContainer` make sure that the `portalContainer` is contained within the `scrollContainer`. E.g, passing the same refrence to `scrollContainer` and `portalContainer`.                            |                        |
-| `scrollContainer`      | `HTMLElement` \| `null`                                                                        | If the popover portal has a scrollable ancestor other than the window, this prop allows passing a reference to that element to allow the portal to position properly.                                                                                                      |                        |
-| `portalClassName`      | `string`                                                                                       | Passes the given className to the popover's portal container if the default portal container is being used.                                                                                                                                                                |                        |
-| `popoverZIndex`        | `number`                                                                                       | Sets the z-index CSS property for the popover.                                                                                                                                                                                                                             |                        |
 | ...                    | native `div` attributes                                                                        | Any other props will be spread on the tooltip `div` element                                                                                                                                                                                                                |                        |
diff --git a/packages/guide-cue/package.json b/packages/guide-cue/package.json
index da08661f40..539f4b2d01 100644
--- a/packages/guide-cue/package.json
+++ b/packages/guide-cue/package.json
@@ -30,9 +30,6 @@
     "access": "public"
   },
   "dependencies": {
-    "focus-trap": "6.9.4",
-    "focus-trap-react": "9.0.2",
-    "polished": "^4.2.2",
     "@leafygreen-ui/a11y": "^1.4.13",
     "@leafygreen-ui/button": "^21.2.0",
     "@leafygreen-ui/emotion": "^4.0.8",
@@ -43,10 +40,12 @@
     "@leafygreen-ui/palette": "^4.0.9",
     "@leafygreen-ui/popover": "^11.4.0",
     "@leafygreen-ui/tooltip": "^11.1.0",
-    "@leafygreen-ui/typography": "^19.0.0"
+    "@leafygreen-ui/typography": "^19.0.0",
+    "focus-trap": "6.9.4",
+    "focus-trap-react": "9.0.2",
+    "polished": "^4.2.2"
   },
   "devDependencies": {
-    "@leafygreen-ui/tokens": "^2.8.0",
     "@lg-tools/storybook-utils": "^0.1.1"
   },
   "peerDependencies": {
diff --git a/packages/guide-cue/src/GuideCue.spec.tsx b/packages/guide-cue/src/GuideCue.spec.tsx
index 4edca4f8df..9542d2c0a4 100644
--- a/packages/guide-cue/src/GuideCue.spec.tsx
+++ b/packages/guide-cue/src/GuideCue.spec.tsx
@@ -158,14 +158,6 @@ describe('packages/guide-cue', () => {
       expect(guideCue).not.toBeInTheDocument();
     });
 
-    test('content should render in a portal', () => {
-      const { container, queryByTestId } = renderGuideCue({
-        open: true,
-      });
-      const guideCue = queryByTestId(guideCueTestId);
-      expect(container).not.toContainElement(guideCue);
-    });
-
     test('number of steps should not be visible', () => {
       const { queryByText } = renderGuideCue({
         open: true,
@@ -192,32 +184,6 @@ describe('packages/guide-cue', () => {
       const body = getByText(guideCueChildren);
       expect(body).toBeInTheDocument();
     });
-
-    test('will render inside portal and scroll container', async () => {
-      const elem = document.createElement('div');
-      document.body.appendChild(elem);
-      renderGuideCue({
-        open: true,
-        portalContainer: elem,
-        scrollContainer: elem,
-      });
-      await act(async () => {
-        expect(elem.innerHTML.includes(guideCueTitle)).toBe(true);
-      });
-    });
-
-    test('accepts a portalRef', async () => {
-      const portalContainer = document.createElement('div');
-      document.body.appendChild(portalContainer);
-      const portalRef = createRef<HTMLElement>();
-      renderGuideCue({
-        open: true,
-        portalContainer,
-        portalRef,
-      });
-      expect(portalRef.current).toBeDefined();
-      expect(portalRef.current).toBe(portalContainer);
-    });
   });
 
   describe('Multi-step tooltip', () => {
@@ -334,17 +300,6 @@ describe('packages/guide-cue', () => {
       expect(modal).not.toBeInTheDocument();
     });
 
-    test('content should render in a portal', async () => {
-      const { container, findByTestId } = renderGuideCue({
-        open: true,
-        numberOfSteps: 2,
-        currentStep: 1,
-      });
-
-      const guideCue = await findByTestId(guideCueTestId);
-      expect(container).not.toContainElement(guideCue);
-    });
-
     test('number of steps should be visible', async () => {
       const { getByText } = renderGuideCue({
         open: true,
@@ -396,20 +351,5 @@ describe('packages/guide-cue', () => {
       const numOfButtons = getAllByRole('button').length;
       await waitFor(() => expect(numOfButtons).toEqual(2));
     });
-
-    test('will render inside portal and scroll container', async () => {
-      const elem = document.createElement('div');
-      document.body.appendChild(elem);
-      const { findByText } = renderGuideCue({
-        open: true,
-        numberOfSteps: 2,
-        currentStep: 1,
-        portalContainer: elem,
-        scrollContainer: elem,
-      });
-
-      const guideCue = await findByText(guideCueTitle);
-      expect(elem).toContainElement(guideCue);
-    });
   });
 });
diff --git a/packages/guide-cue/src/GuideCue.stories.tsx b/packages/guide-cue/src/GuideCue.stories.tsx
index 7455252466..a6fa8781a6 100644
--- a/packages/guide-cue/src/GuideCue.stories.tsx
+++ b/packages/guide-cue/src/GuideCue.stories.tsx
@@ -12,7 +12,6 @@ import Button from '@leafygreen-ui/button';
 import { css } from '@leafygreen-ui/emotion';
 import { palette } from '@leafygreen-ui/palette';
 import { Align } from '@leafygreen-ui/popover';
-import { transitionDuration } from '@leafygreen-ui/tokens';
 import { Body } from '@leafygreen-ui/typography';
 
 import { GuideCue, GuideCueProps, TooltipAlign, TooltipJustify } from '.';
@@ -80,11 +79,11 @@ const meta: StoryMetaType<any> = {
             <div
               className={css`
                 height: ${refElHeight}px;
-                width: ${refElWidth}px
+                width: ${refElWidth}px;
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                outline: 1px solid ${palette.gray.base}80;
+                outline: 1px solid ${palette.gray.base};
               `}
               ref={refEl}
             >
@@ -191,12 +190,11 @@ export const ScrollableContainer: StoryFn<GuideCueProps> = (
 ) => {
   const [open, setOpen] = useState<boolean>(false);
   const triggerRef = useRef<null | HTMLDivElement>(null);
-  const portalContainer = useRef<HTMLDivElement | null>(null);
 
   const { children, darkMode } = args;
   return (
     <div className={scrollableStyle}>
-      <div className={scrollableInnerStyle} ref={portalContainer}>
+      <div className={scrollableInnerStyle}>
         <>
           <Button
             onClick={() => setOpen(o => !o)}
@@ -216,8 +214,6 @@ export const ScrollableContainer: StoryFn<GuideCueProps> = (
             open={open}
             setOpen={setOpen}
             refEl={triggerRef}
-            portalContainer={portalContainer.current}
-            scrollContainer={portalContainer.current}
           >
             {children}
           </GuideCue>
diff --git a/packages/guide-cue/src/GuideCue.tsx b/packages/guide-cue/src/GuideCue.tsx
index 978f2ffada..356de67ed2 100644
--- a/packages/guide-cue/src/GuideCue.tsx
+++ b/packages/guide-cue/src/GuideCue.tsx
@@ -5,7 +5,11 @@ import PropTypes from 'prop-types';
 import { usePrefersReducedMotion } from '@leafygreen-ui/a11y';
 import { useIsomorphicLayoutEffect } from '@leafygreen-ui/hooks';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
-import Popover, { Align } from '@leafygreen-ui/popover';
+import Popover, {
+  Align,
+  DismissMode,
+  RenderMode,
+} from '@leafygreen-ui/popover';
 
 import { beaconStyles, timeout1, timeout2 } from './styles';
 import TooltipContent from './TooltipContent';
@@ -23,15 +27,10 @@ function GuideCue({
   onDismiss = () => {},
   onPrimaryButtonClick = () => {},
   tooltipClassName,
-  portalClassName,
   buttonText: buttonTextProp,
   tooltipAlign = TooltipAlign.Top,
   tooltipJustify = TooltipJustify.Middle,
   beaconAlign = Align.CenterHorizontal,
-  portalContainer,
-  portalRef,
-  scrollContainer,
-  popoverZIndex,
   ...tooltipProps
 }: GuideCueProps) {
   const { darkMode, theme } = useDarkMode(darkModeProp);
@@ -105,13 +104,6 @@ function GuideCue({
    */
   const onEscClose = isStandalone ? onPrimaryButtonClick : onDismiss;
 
-  const sharedProps = {
-    portalClassName,
-    portalContainer,
-    portalRef,
-    scrollContainer,
-  };
-
   const tooltipContentProps = {
     darkMode,
     open,
@@ -119,7 +111,6 @@ function GuideCue({
     tooltipJustify,
     tooltipAlign,
     refEl,
-    popoverZIndex,
     numberOfSteps,
     currentStep,
     theme,
@@ -146,9 +137,7 @@ function GuideCue({
       {isStandalone ? (
         // Standalone tooltip
         // this is using the reference from the `refEl` prop to position itself against
-        <TooltipContent {...tooltipContentProps} {...sharedProps}>
-          {children}
-        </TooltipContent>
+        <TooltipContent {...tooltipContentProps}>{children}</TooltipContent>
       ) : (
         // Multistep tooltip
         <Popover
@@ -158,9 +147,8 @@ function GuideCue({
           justify={TooltipJustify.Middle}
           spacing={-12} // width of beacon is 24px, 24/2 = 12
           adjustOnMutation={true}
-          popoverZIndex={popoverZIndex}
-          {...sharedProps}
-          usePortal={true}
+          dismissMode={DismissMode.Manual}
+          renderMode={RenderMode.TopLayer}
         >
           {/* The beacon is using the popover component to position itself */}
           <div
@@ -176,7 +164,6 @@ function GuideCue({
             {...tooltipContentProps}
             refEl={beaconRef}
             open={tooltipOpen}
-            usePortal={false}
           >
             {children}
           </TooltipContent>
@@ -228,23 +215,6 @@ GuideCue.propTypes = {
   tooltipAlign: PropTypes.oneOf(Object.values(TooltipAlign)),
   tooltipJustify: PropTypes.oneOf(Object.values(TooltipJustify)),
   beaconAlign: PropTypes.oneOf(Object.values(Align)),
-  // Popover Props
-  popoverZIndex: PropTypes.number,
-  scrollContainer:
-    typeof window !== 'undefined'
-      ? PropTypes.instanceOf(Element)
-      : PropTypes.any,
-  portalContainer:
-    typeof window !== 'undefined'
-      ? PropTypes.instanceOf(Element)
-      : PropTypes.any,
-  portalClassName: PropTypes.string,
-  portalRef: PropTypes.shape({
-    current:
-      typeof window !== 'undefined'
-        ? PropTypes.instanceOf(Element)
-        : PropTypes.any,
-  }),
 };
 
 export default GuideCue;
diff --git a/packages/guide-cue/src/TooltipContent.tsx b/packages/guide-cue/src/TooltipContent.tsx
index 7c87d4cbce..7e209b15f8 100644
--- a/packages/guide-cue/src/TooltipContent.tsx
+++ b/packages/guide-cue/src/TooltipContent.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Options } from 'focus-trap';
 import FocusTrap from 'focus-trap-react';
 
@@ -8,7 +8,7 @@ import { useIdAllocator } from '@leafygreen-ui/hooks';
 import XIcon from '@leafygreen-ui/icon/dist/X';
 import IconButton from '@leafygreen-ui/icon-button';
 import { Theme } from '@leafygreen-ui/lib';
-import Tooltip from '@leafygreen-ui/tooltip';
+import Tooltip, { RenderMode } from '@leafygreen-ui/tooltip';
 import { Body, Disclaimer } from '@leafygreen-ui/typography';
 
 import {
@@ -36,7 +36,6 @@ type TooltipContentProps = Partial<GuideCueProps> & {
   onEscClose: () => void;
   handleButtonClick: () => void;
   handleCloseClick: () => void;
-  usePortal?: boolean;
 };
 
 function TooltipContent({
@@ -46,10 +45,6 @@ function TooltipContent({
   tooltipJustify,
   tooltipAlign,
   refEl,
-  portalClassName,
-  portalContainer,
-  scrollContainer,
-  popoverZIndex,
   theme,
   title,
   isStandalone,
@@ -61,9 +56,9 @@ function TooltipContent({
   onEscClose,
   handleButtonClick,
   handleCloseClick,
-  usePortal = true,
   ...tooltipProps
 }: TooltipContentProps) {
+  const [focusable, setFocusable] = useState(false);
   const focusId = useIdAllocator({ prefix: 'guide-cue' });
 
   const focusTrapOptions: Options = {
@@ -84,17 +79,14 @@ function TooltipContent({
           tooltipStyles,
           tooltipClassName,
         )}
-        portalClassName={portalClassName}
-        portalContainer={portalContainer}
-        scrollContainer={scrollContainer}
-        popoverZIndex={popoverZIndex}
         onClose={onEscClose}
+        onEntered={() => setFocusable(true)}
         role="dialog"
         aria-labelledby={ariaLabelledby}
-        usePortal={usePortal}
+        renderMode={RenderMode.TopLayer}
         {...tooltipProps}
       >
-        <FocusTrap focusTrapOptions={focusTrapOptions}>
+        <FocusTrap active={focusable} focusTrapOptions={focusTrapOptions}>
           <div>
             {!isStandalone && (
               <IconButton
diff --git a/packages/guide-cue/src/types.ts b/packages/guide-cue/src/types.ts
index f3f704c349..7664c1c9e7 100644
--- a/packages/guide-cue/src/types.ts
+++ b/packages/guide-cue/src/types.ts
@@ -23,22 +23,28 @@ export type TooltipJustify =
 // Exclude these from tooltip (tooltip already extends popover props)
 type ModifiedTooltipProps = Omit<
   TooltipProps,
-  | 'usePortal'
-  | 'justify'
   | 'align'
-  | 'onClick'
-  | 'trigger'
-  | 'triggerEvent'
-  | 'shouldClose'
-  | 'className'
   | 'children'
+  | 'className'
+  | 'darkMode'
+  | 'dismissMode'
+  | 'initialOpen'
+  | 'justify'
+  | 'onClick'
   | 'onClose'
-  | 'setOpen'
+  | 'onToggle'
   | 'open'
+  | 'popoverZIndex'
+  | 'portalClassName'
+  | 'portalContainer'
+  | 'portalRef'
   | 'refEl'
-  | 'darkMode'
-  | 'initialOpen'
   | 'renderMode'
+  | 'scrollContainer'
+  | 'setOpen'
+  | 'shouldClose'
+  | 'trigger'
+  | 'triggerEvent'
 >;
 
 interface StandaloneProps {
diff --git a/packages/info-sprinkle/README.md b/packages/info-sprinkle/README.md
index 070282d167..95676138de 100644
--- a/packages/info-sprinkle/README.md
+++ b/packages/info-sprinkle/README.md
@@ -35,26 +35,21 @@ import { InfoSprinkle } from `@leafygreen-ui/info-sprinkle`;
 
 ## Properties
 
-| Prop              | Type                                     | Description                                                                                                                                                                                                                                                                         | Default                                     |
-| ----------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
-| `children`        | `React.ReactNode`                        | String that will be rendered inside of `<InfoSprinkle />`                                                                                                                                                                                                                           |                                             |
-| `open`            | `boolean`                                | Controls the component, and determines whether or not the `<InfoSprinkle />` will appear open or closed.                                                                                                                                                                            | `false`                                     |
-| `setOpen`         | `function`                               | If controlling the component, pass state handling function to setOpen prop. This will keep the consuming application's state in-sync with LeafyGreen's state, while the `<InfoSprinkle />` component responds to events such as backdrop clicks and a user pressing the Escape key. | `(boolean) => boolean`                      |
-| `shouldClose`     | `function`                               | Callback that should return a boolean that determines whether or not the `<InfoSprinkle />` should close when a user tries to close it.                                                                                                                                             | `() => true`                                |
-| `align`           | `'top'`, `'bottom'`, `'left'`, `'right'` | Determines the preferred alignment of the `<InfoSprinkle />` component relative to the element passed to the `trigger` prop.                                                                                                                                                        | `'top'`                                     |
-| `justify`         | `'start'`, `'middle'`, `'end'`           | Determines the preferred justification of the `<InfoSprinkle />` component (based on the alignment) relative to the element passed to the `trigger` prop.                                                                                                                           | `'start'`                                   |
-| `darkMode`        | `boolean`                                | Determines if the `<InfoSprinkle />` will appear in dark mode.                                                                                                                                                                                                                      | `false`                                     |
-| `id`              | `string`                                 | `id` applied to `<InfoSprinkle />` component                                                                                                                                                                                                                                        |                                             |
-| `className`       | `string`                                 | Applies a className to Tooltip container                                                                                                                                                                                                                                            |                                             |
-| `triggerProps`    | native `span` attributes                 | Props passed to the trigger                                                                                                                                                                                                                                                         | `{}`                                        |
-| `enabled`         | `boolean`                                | Enables Tooltip to trigger.                                                                                                                                                                                                                                                         | `true`                                      |
-| `onClose`         | `function`                               | Callback that is called when the tooltip is closed internally. E.g. on ESC press, on backdrop click, on blur..                                                                                                                                                                      | `() => {}`                                  |
-| `usePortal`       | `boolean`                                | Determines if the Tooltip will be rendered within a portal.                                                                                                                                                                                                                         | `true`                                      |
-| `portalContainer` | `HTMLElement` \| `null`                  | Sets the container used for the popover's portal. NOTE: If using a `scrollContainer` make sure that the `portalContainer` is contained within the `scrollContainer`. E.g, passing the same refrence to `scrollContainer` and `portalContainer`.                                     |                                             |
-| `scrollContainer` | `HTMLElement` \| `null`                  | If the popover portal has a scrollable ancestor other than the window, this prop allows passing a reference to that lement to allow the portal to position properly.                                                                                                                |                                             |
-| `portalClassName` | `string`                                 | Passes the given className to the popover's portal container if the default portal container is being used.                                                                                                                                                                         |                                             |
-| `popoverZIndex`   | `number`                                 | Sets the z-index CSS property for the popover.                                                                                                                                                                                                                                      |                                             |
-| `baseFontSize`    | `13` \| `16`                             | font-size applied to typography element                                                                                                                                                                                                                                             | default to value set by LeafyGreen Provider |
-| ...               | native `div` attributes                  | Any other props will be spread on the tooltip element                                                                                                                                                                                                                               |                                             |
+| Prop           | Type                                     | Description                                                                                                                                                                                                                                                                         | Default                                     |
+| -------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
+| `children`     | `React.ReactNode`                        | String that will be rendered inside of `<InfoSprinkle />`                                                                                                                                                                                                                           |                                             |
+| `open`         | `boolean`                                | Controls the component, and determines whether or not the `<InfoSprinkle />` will appear open or closed.                                                                                                                                                                            | `false`                                     |
+| `setOpen`      | `function`                               | If controlling the component, pass state handling function to setOpen prop. This will keep the consuming application's state in-sync with LeafyGreen's state, while the `<InfoSprinkle />` component responds to events such as backdrop clicks and a user pressing the Escape key. | `(boolean) => boolean`                      |
+| `shouldClose`  | `function`                               | Callback that should return a boolean that determines whether or not the `<InfoSprinkle />` should close when a user tries to close it.                                                                                                                                             | `() => true`                                |
+| `align`        | `'top'`, `'bottom'`, `'left'`, `'right'` | Determines the preferred alignment of the `<InfoSprinkle />` component relative to the element passed to the `trigger` prop.                                                                                                                                                        | `'top'`                                     |
+| `justify`      | `'start'`, `'middle'`, `'end'`           | Determines the preferred justification of the `<InfoSprinkle />` component (based on the alignment) relative to the element passed to the `trigger` prop.                                                                                                                           | `'start'`                                   |
+| `darkMode`     | `boolean`                                | Determines if the `<InfoSprinkle />` will appear in dark mode.                                                                                                                                                                                                                      | `false`                                     |
+| `id`           | `string`                                 | `id` applied to `<InfoSprinkle />` component                                                                                                                                                                                                                                        |                                             |
+| `className`    | `string`                                 | Applies a className to Tooltip container                                                                                                                                                                                                                                            |                                             |
+| `triggerProps` | native `span` attributes                 | Props passed to the trigger                                                                                                                                                                                                                                                         | `{}`                                        |
+| `enabled`      | `boolean`                                | Enables Tooltip to trigger.                                                                                                                                                                                                                                                         | `true`                                      |
+| `onClose`      | `function`                               | Callback that is called when the tooltip is closed internally. E.g. on ESC press, on backdrop click, on blur..                                                                                                                                                                      | `() => {}`                                  |
+| `baseFontSize` | `13` \| `16`                             | font-size applied to typography element                                                                                                                                                                                                                                             | default to value set by LeafyGreen Provider |
+| ...            | native `div` attributes                  | Any other props will be spread on the tooltip element                                                                                                                                                                                                                               |                                             |
 
 **Note:** The `ref` of this component will be the trigger icon but all props will spread to the internal `<Tooltip/>` component.
diff --git a/packages/info-sprinkle/src/InfoSprinkle/InfoSprinkle.tsx b/packages/info-sprinkle/src/InfoSprinkle/InfoSprinkle.tsx
index b0c3bcf45f..913c94e97a 100644
--- a/packages/info-sprinkle/src/InfoSprinkle/InfoSprinkle.tsx
+++ b/packages/info-sprinkle/src/InfoSprinkle/InfoSprinkle.tsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { cx } from '@leafygreen-ui/emotion';
 import InfoWithCircleIcon from '@leafygreen-ui/icon/dist/InfoWithCircle';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
-import Tooltip from '@leafygreen-ui/tooltip';
+import Tooltip, { RenderMode } from '@leafygreen-ui/tooltip';
 
 import { iconBaseStyles, iconThemeStyles } from './InfoSprinkle.styles';
 import { Align, InfoSprinkleProps, Justify } from './InfoSprinkle.types';
@@ -26,8 +26,9 @@ export const InfoSprinkle = React.forwardRef<
     const { darkMode, theme } = useDarkMode(darkModeProp);
     return (
       <Tooltip
-        darkMode={darkMode}
         baseFontSize={baseFontSize}
+        darkMode={darkMode}
+        renderMode={RenderMode.TopLayer}
         trigger={
           <button
             data-testid="info-sprinkle-icon"
@@ -65,6 +66,4 @@ InfoSprinkle.propTypes = {
   setOpen: PropTypes.func,
   id: PropTypes.string,
   shouldClose: PropTypes.func,
-  usePortal: PropTypes.bool,
-  portalClassName: PropTypes.string,
 };
diff --git a/packages/info-sprinkle/src/InfoSprinkle/InfoSprinkle.types.ts b/packages/info-sprinkle/src/InfoSprinkle/InfoSprinkle.types.ts
index e0d9816fce..e39bd373e8 100644
--- a/packages/info-sprinkle/src/InfoSprinkle/InfoSprinkle.types.ts
+++ b/packages/info-sprinkle/src/InfoSprinkle/InfoSprinkle.types.ts
@@ -6,7 +6,18 @@ export { Align, Justify };
 
 type ModifiedTooltipProps = Omit<
   TooltipProps,
-  'onClick' | 'trigger' | 'triggerEvent' | 'refEl' | 'spacing'
+  | 'dismissMode'
+  | 'onClick'
+  | 'popoverZIndex'
+  | 'portalClassName'
+  | 'portalContainer'
+  | 'portalRef'
+  | 'refEl'
+  | 'renderMode'
+  | 'scrollContainer'
+  | 'spacing'
+  | 'trigger'
+  | 'triggerEvent'
 >;
 
 export interface InfoSprinkleProps extends ModifiedTooltipProps {
diff --git a/packages/inline-definition/src/InlineDefinition.spec.tsx b/packages/inline-definition/src/InlineDefinition.spec.tsx
index 5ff598f6e8..a19102ceaf 100644
--- a/packages/inline-definition/src/InlineDefinition.spec.tsx
+++ b/packages/inline-definition/src/InlineDefinition.spec.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import {
   act,
-  fireEvent,
   render,
   screen,
   waitFor,
   waitForElementToBeRemoved,
 } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
 
 import { H2 } from '@leafygreen-ui/typography';
@@ -33,7 +33,7 @@ describe('packages/inline-definition', () => {
       expect(results).toHaveNoViolations();
 
       let newResults = null as any;
-      act(() => void fireEvent.mouseEnter(getByText('Shard')));
+      act(() => void userEvent.hover(getByText('Shard')));
       await act(async () => {
         newResults = await axe(container);
       });
@@ -54,18 +54,15 @@ describe('packages/inline-definition', () => {
     renderInlineDefinition();
     const children = screen.getByText('Shard');
 
-    fireEvent.mouseEnter(children);
+    userEvent.hover(children);
 
-    await waitFor(
-      () => expect(screen.getByText(shardDefinition)).toBeVisible(),
-      { timeout: 500 },
+    await waitFor(() =>
+      expect(screen.getByText(shardDefinition)).toBeVisible(),
     );
 
-    fireEvent.mouseLeave(children);
+    userEvent.unhover(children);
 
-    await waitForElementToBeRemoved(screen.getByText(shardDefinition), {
-      timeout: 500,
-    });
+    await waitForElementToBeRemoved(screen.getByText(shardDefinition));
   });
 
   /* eslint-disable jest/no-disabled-tests, jest/expect-expect */
diff --git a/packages/inline-definition/src/InlineDefinition.tsx b/packages/inline-definition/src/InlineDefinition.tsx
index aef15f167b..ab8777244c 100644
--- a/packages/inline-definition/src/InlineDefinition.tsx
+++ b/packages/inline-definition/src/InlineDefinition.tsx
@@ -5,7 +5,7 @@ import { css, cx } from '@leafygreen-ui/emotion';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { Theme } from '@leafygreen-ui/lib';
 import { palette } from '@leafygreen-ui/palette';
-import Tooltip, { TooltipProps } from '@leafygreen-ui/tooltip';
+import Tooltip, { RenderMode, TooltipProps } from '@leafygreen-ui/tooltip';
 
 const triggerElementStyles = css`
   border-radius: 2px;
@@ -51,7 +51,19 @@ const triggerElementModeStyles: Record<Theme, string> = {
   `,
 };
 
-export interface InlineDefinitionProps extends Partial<TooltipProps> {
+export interface InlineDefinitionProps
+  extends Partial<
+    Omit<
+      TooltipProps,
+      | 'dismissMode'
+      | 'popoverZIndex'
+      | 'portalClassName'
+      | 'portalContainer'
+      | 'portalRef'
+      | 'renderMode'
+      | 'scrollContainer'
+    >
+  > {
   /**
    * Trigger element for the definition tooltip
    * @required
@@ -89,10 +101,11 @@ function InlineDefinition({
 
   return (
     <Tooltip
-      justify="middle"
-      spacing={9}
       className={tooltipClassName}
       darkMode={darkMode}
+      justify="middle"
+      renderMode={RenderMode.TopLayer}
+      spacing={9}
       {...tooltipProps}
       trigger={
         <span
diff --git a/packages/leafygreen-provider/src/LeafyGreenContext.tsx b/packages/leafygreen-provider/src/LeafyGreenContext.tsx
index b756c1dcd3..baf879d3ce 100644
--- a/packages/leafygreen-provider/src/LeafyGreenContext.tsx
+++ b/packages/leafygreen-provider/src/LeafyGreenContext.tsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import { DarkModeProps } from '@leafygreen-ui/lib';
 
+import { RenderMode } from './PopoverContext/PopoverContext.types';
 import DarkModeProvider, { useDarkModeContext } from './DarkModeContext';
 import { OverlayProvider } from './OverlayContext';
 import {
@@ -65,6 +66,12 @@ function LeafyGreenProvider({
     );
   const { portalContainer, scrollContainer } =
     popoverPortalContainerProp ?? inheritedPopoverContextContainers;
+  const popoverProviderProps =
+    portalContainer || scrollContainer
+      ? { renderMode: RenderMode.Portal, portalContainer, scrollContainer }
+      : ({
+          renderMode: RenderMode.TopLayer,
+        } as const);
 
   return (
     <UsingKeyboardProvider>
@@ -74,10 +81,7 @@ function LeafyGreenProvider({
           setDarkMode={setDarkMode}
         >
           <OverlayProvider>
-            <PopoverProvider
-              portalContainer={portalContainer}
-              scrollContainer={scrollContainer}
-            >
+            <PopoverProvider {...popoverProviderProps}>
               {children}
             </PopoverProvider>
           </OverlayProvider>
diff --git a/packages/leafygreen-provider/src/PopoverContext/PopoverContext.types.ts b/packages/leafygreen-provider/src/PopoverContext/PopoverContext.types.ts
index e7600b1bc1..bda29a7d19 100644
--- a/packages/leafygreen-provider/src/PopoverContext/PopoverContext.types.ts
+++ b/packages/leafygreen-provider/src/PopoverContext/PopoverContext.types.ts
@@ -15,6 +15,19 @@ type TransitionLifecycleCallbacks = Pick<
   'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited'
 >;
 
+/**
+ * Options to render the popover element
+ * @param Inline will render the popover element inline in the DOM where it's written
+ * @param Portal will render the popover element in a new div appended to the body. Alternatively, can be portaled into a provided `portalContainer`
+ * @param TopLayer will render the popover element in the top layer
+ */
+export const RenderMode = {
+  Inline: 'inline',
+  Portal: 'portal',
+  TopLayer: 'top-layer',
+} as const;
+export type RenderMode = (typeof RenderMode)[keyof typeof RenderMode];
+
 /**
  * Options to control how the popover element is dismissed. This should not be altered
  * because it is intended to have parity with the web-native {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover popover attribute}
@@ -34,116 +47,166 @@ interface ToggleEvent extends Event {
   oldState: 'open' | 'closed';
 }
 
-/** @deprecated - use {@link RenderTopLayerProps} */
-interface RenderInlineProps {
+export interface RenderInlineProps {
   /**
-   * Popover element will render inline with the reference element
+   * Options to render the popover element
+   * @defaultValue 'top-layer'
+   * @param Inline will render the popover element inline in the DOM where it's written. This option is deprecated and will be removed in the future.
+   * @param Portal will render the popover element in a new div appended to the body. Alternatively, can be portaled into a provided `portalContainer`. This option is deprecated and will be removed in the future.
+   * @param TopLayer will render the popover element in the top layer
    */
   renderMode: 'inline';
 
-  /** Not used in this `renderMode` */
+  /**
+   * When `renderMode="top-layer"`, these options can control how a popover element is dismissed
+   * - `'auto'` will automatically handle dismissal on backdrop click or key press, ensuring only one popover is visible at a time
+   * - `'manual'` will require that the consumer handle dismissal manually
+   */
   dismissMode?: never;
 
-  /** Not used in this `renderMode` */
+  /**
+   * A callback function that is called when the visibility of a popover element rendered in the top layer is toggled
+   */
   onToggle?: never;
 
-  /** Not used in this `renderMode` */
+  /**
+   * When `renderMode="portal"`, it specifies a class name to apply to the portal element
+   * @deprecated
+   */
   portalClassName?: never;
 
-  /** Not used in this `renderMode` */
+  /**
+   * When `renderMode="portal"`, it specifies an element to portal within. If not provided, a div is generated at the end of the body
+   * @deprecated
+   */
   portalContainer?: never;
 
-  /** Not used in this `renderMode` */
+  /**
+   * When `renderMode="portal"`, it passes a ref to forward to the portal element
+   * @deprecated
+   */
   portalRef?: never;
 
-  /** Not used in this `renderMode` */
+  /**
+   * When `renderMode="portal"`, it specifies the scrollable element to position relative to
+   * @deprecated
+   */
   scrollContainer?: never;
 }
 
-/** @deprecated - use {@link RenderTopLayerProps} */
-interface RenderPortalProps {
+export interface RenderPortalProps {
   /**
-   * Popover element will render in a provided `portalContainer` or in a new div appended to the body
+   * Options to render the popover element
+   * @defaultValue 'top-layer'
+   * @param Inline will render the popover element inline in the DOM where it's written. This option is deprecated and will be removed in the future.
+   * @param Portal will render the popover element in a new div appended to the body. Alternatively, can be portaled into a provided `portalContainer`. This option is deprecated and will be removed in the future.
+   * @param TopLayer will render the popover element in the top layer
    */
-  renderMode?: 'portal';
+  renderMode: 'portal';
 
-  /** Not used in this `renderMode` */
+  /**
+   * When `renderMode="top-layer"`, these options can control how a popover element is dismissed
+   * - `'auto'` will automatically handle dismissal on backdrop click or key press, ensuring only one popover is visible at a time
+   * - `'manual'` will require that the consumer handle dismissal manually
+   */
   dismissMode?: never;
 
-  /** Not used in this `renderMode` */
+  /**
+   * When `renderMode="top-layer"`, this callback function is called when the visibility of a popover element is toggled
+   */
   onToggle?: never;
 
   /**
-   * Specifies a class name to apply to the portal element
+   * When `renderMode="portal"`, it specifies a class name to apply to the portal element
+   * @deprecated
    */
   portalClassName?: string;
 
   /**
-   * Specifies an element to portal within. If not provided, a div is generated at the end of the body
+   * When `renderMode="portal"`, it specifies an element to portal within. If not provided, a div is generated at the end of the body
+   * @deprecated
    */
   portalContainer?: HTMLElement | null;
 
   /**
-   * Passes a ref to forward to the portal element
+   * When `renderMode="portal"`, it passes a ref to forward to the portal element
+   * @deprecated
    */
   portalRef?: React.MutableRefObject<HTMLElement | null>;
 
   /**
-   * Specifies the scrollable element to position relative to
+   * When `renderMode="portal"`, it specifies the scrollable element to position relative to
+   * @deprecated
    */
   scrollContainer?: HTMLElement | null;
 }
 
-interface RenderTopLayerProps {
+export interface RenderTopLayerProps {
   /**
-   * Popover element will render in the top layer
+   * Options to render the popover element
+   * @defaultValue 'top-layer'
+   * @param Inline will render the popover element inline in the DOM where it's written. This option is deprecated and will be removed in the future.
+   * @param Portal will render the popover element in a new div appended to the body. Alternatively, can be portaled into a provided `portalContainer`. This option is deprecated and will be removed in the future.
+   * @param TopLayer will render the popover element in the top layer
    */
   renderMode?: 'top-layer';
 
   /**
-   * Options to control how the popover element is dismissed
+   * When `renderMode="top-layer"`, these options can control how a popover element is dismissed
    * - `'auto'` will automatically handle dismissal on backdrop click or key press, ensuring only one popover is visible at a time
    * - `'manual'` will require that the consumer handle dismissal manually
    */
   dismissMode?: DismissMode;
 
   /**
-   * A callback function that is called when the popover is toggled
+   * A callback function that is called when the visibility of a popover element rendered in the top layer is toggled
    */
   onToggle?: (e: ToggleEvent) => void;
 
-  /** Not used in this `renderMode` */
+  /**
+   * When `renderMode="portal"`, it specifies a class name to apply to the portal element
+   * @deprecated
+   */
   portalClassName?: never;
 
-  /** Not used in this `renderMode` */
+  /**
+   * When `renderMode="portal"`, it specifies an element to portal within. If not provided, a div is generated at the end of the body
+   * @deprecated
+   */
   portalContainer?: never;
 
-  /** Not used in this `renderMode` */
+  /**
+   * When `renderMode="portal"`, it passes a ref to forward to the portal element
+   * @deprecated
+   */
   portalRef?: never;
 
-  /** Not used in this `renderMode` */
+  /**
+   * When `renderMode="portal"`, it specifies the scrollable element to position relative to
+   * @deprecated
+   */
   scrollContainer?: never;
 }
 
 type PopoverRenderModeProps =
-  | RenderInlineProps
   | RenderPortalProps
+  | RenderInlineProps
   | RenderTopLayerProps;
 
-export type PopoverProviderProps = TransitionLifecycleCallbacks &
-  PopoverRenderModeProps & {
-    /**
-     * Specifies the amount of spacing (in pixels) between the trigger element and the Popover content.
-     *
-     * default: `10`
-     */
-    spacing?: number;
-
-    /**
-     * Number that controls the z-index of the popover element directly.
-     */
-    popoverZIndex?: number;
-  };
+export type PopoverProviderProps = {
+  /**
+   * Specifies the amount of spacing (in pixels) between the trigger element and the Popover content.
+   *
+   * default: `10`
+   */
+  spacing?: number;
+
+  /**
+   * Number that controls the z-index of the popover element directly.
+   */
+  popoverZIndex?: number;
+} & PopoverRenderModeProps &
+  TransitionLifecycleCallbacks;
 
 /** TODO: https://jira.mongodb.org/browse/LG-4475 */
 interface DeprecatedPopoverState {
diff --git a/packages/leafygreen-provider/src/PopoverContext/index.ts b/packages/leafygreen-provider/src/PopoverContext/index.ts
index 69acd09128..87ba80d62d 100644
--- a/packages/leafygreen-provider/src/PopoverContext/index.ts
+++ b/packages/leafygreen-provider/src/PopoverContext/index.ts
@@ -6,4 +6,5 @@ export {
 export {
   type PopoverContextType,
   type PopoverProviderProps,
+  RenderMode,
 } from './PopoverContext.types';
diff --git a/packages/leafygreen-provider/src/index.ts b/packages/leafygreen-provider/src/index.ts
index 25ba508d85..8b3502fdac 100644
--- a/packages/leafygreen-provider/src/index.ts
+++ b/packages/leafygreen-provider/src/index.ts
@@ -12,6 +12,7 @@ export {
   type PopoverContextType,
   PopoverProvider,
   type PopoverProviderProps,
+  RenderMode,
   usePopoverContext,
 } from './PopoverContext';
 export { useBaseFontSize } from './TypographyContext';
diff --git a/packages/menu/README.md b/packages/menu/README.md
index 9efda94fa9..43d819e88a 100644
--- a/packages/menu/README.md
+++ b/packages/menu/README.md
@@ -207,24 +207,23 @@ would render, but without the correct styles.
 
 ## Properties
 
-| Prop               | Type                                     | Description                                                                                                                                                                                                                                                             | Default      |
-| ------------------ | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
-| `open`             | `boolean`                                | Determines whether or not the `<Menu />` will appear as open or closed                                                                                                                                                                                                  | `false`      |
-| `setOpen`          | `function`                               | When controlling the component, use `setOpen` to keep track of the `<Menu />` component's state so that clicks on the document's backdrop as well as a user pressing the Escape Key will close the Menu and update the consuming application's local state accordingly. |              |
-| `initialOpen`      | `boolean`                                | Passes an initial value for "open" to an uncontrolled menu                                                                                                                                                                                                              | `false`      |
-| `shouldClose`      | `function`                               | Determines if the `Menu` should close when the backdrop or Escape keys are clicked. Defaults to true.                                                                                                                                                                   | `() => true` |
-| `align`            | `'top'`, `'bottom'`, `'left'`, `'right'` | Determines the alignment of the `<Menu />` component relative to a reference element, or the element's nearest parent                                                                                                                                                   | `'bottom'`   |
-| `justify`          | `'start'`, `'middle'`, `'end'`           | Determines the justification of the `Menu` component (based on the alignment) relative to a reference element or the element's nearest parent                                                                                                                           | `'end'`      |
-| `refEl`            | `HTMLElement`                            | Pass a reference to an element that the `Menu` component should be positioned against                                                                                                                                                                                   |              |
-| `trigger`          | `function`, `React.ReactNode`            | A `ReactNode` against which the Menu will be positioned. The trigger prop can also support being passed a function. To work as expected, the function must accept an argument of `children`, which should be rendered inside of the function passed to trigger.         |              |
-| `usePortal`        | `boolean`                                | Will position Menu's children relative to its parent without using a Portal if `usePortal` is set to false. NOTE: The parent element should be CSS position relative, fixed, or absolute if using this option.                                                          | `true`       |
-| `adjustOnMutation` | `boolean`                                | Determines whether or not the `<Menu/>` should reposition itself based on changes to `trigger` or reference element position.                                                                                                                                           | `false`      |
-| `usePortal`        | `boolean`                                | Determines if the Menu will be rendered within a portal.                                                                                                                                                                                                                | `true`       |
-| `portalContainer`  | `HTMLElement`, `null`                    | Sets the container used for the popover's portal.                                                                                                                                                                                                                       |              |
-| `scrollContainer`  | `HTMLElement`, `null`                    | If the popover portal has a scrollable ancestor other than the window, this prop allows passing a reference to that lement to allow the portal to position properly.                                                                                                    |              |
-| `portalClassName`  | `string`                                 | Passes the given className to the popover's portal container if the default portal container is being used.                                                                                                                                                             |              |
-| `popoverZIndex`    | `number`                                 | Sets the z-index CSS property for the popover.                                                                                                                                                                                                                          |              |
-| `darkMode`         | `boolean`                                | Determines whether or not the component will be rendered in dark theme.                                                                                                                                                                                                 |              |
+| Prop                           | Type                                      | Description                                                                                                                                                                                                                                                                                                                                                                           | Default       |
+| ------------------------------ | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
+| `open`                         | `boolean`                                 | Determines whether or not the `<Menu />` will appear as open or closed                                                                                                                                                                                                                                                                                                                | `false`       |
+| `setOpen`                      | `function`                                | When controlling the component, use `setOpen` to keep track of the `<Menu />` component's state so that clicks on the document's backdrop as well as a user pressing the Escape Key will close the Menu and update the consuming application's local state accordingly.                                                                                                               |               |
+| `initialOpen`                  | `boolean`                                 | Passes an initial value for "open" to an uncontrolled menu                                                                                                                                                                                                                                                                                                                            | `false`       |
+| `shouldClose`                  | `function`                                | Determines if the `Menu` should close when the backdrop or Escape keys are clicked. Defaults to true.                                                                                                                                                                                                                                                                                 | `() => true`  |
+| `align`                        | `'top'`, `'bottom'`, `'left'`, `'right'`  | Determines the alignment of the `<Menu />` component relative to a reference element, or the element's nearest parent                                                                                                                                                                                                                                                                 | `'bottom'`    |
+| `justify`                      | `'start'`, `'middle'`, `'end'`            | Determines the justification of the `Menu` component (based on the alignment) relative to a reference element or the element's nearest parent                                                                                                                                                                                                                                         | `'end'`       |
+| `refEl`                        | `HTMLElement`                             | Pass a reference to an element that the `Menu` component should be positioned against                                                                                                                                                                                                                                                                                                 |               |
+| `trigger`                      | `function`, `React.ReactNode`             | A `ReactNode` against which the Menu will be positioned. The trigger prop can also support being passed a function. To work as expected, the function must accept an argument of `children`, which should be rendered inside of the function passed to trigger.                                                                                                                       |               |
+| `adjustOnMutation`             | `boolean`                                 | Determines whether or not the `<Menu/>` should reposition itself based on changes to `trigger` or reference element position.                                                                                                                                                                                                                                                         | `false`       |
+| `renderMode`                   | `'inline'` \| `'portal'` \| `'top-layer'` | Options to render the popover element <br> \* [deprecated] `'inline'` will render the popover element inline in the DOM where it's written <br> \* [deprecated] `'portal'` will render the popover element in a new div appended to the body. Alternatively, can be portaled into a provided `portalContainer` <br> \* `'top-layer'` will render the popover element in the top layer | `'top-layer'` |
+| `portalContainer` (deprecated) | `HTMLElement`, `null`                     | Sets the container used for the popover's portal.                                                                                                                                                                                                                                                                                                                                     |               |
+| `scrollContainer` (deprecated) | `HTMLElement`, `null`                     | If the popover portal has a scrollable ancestor other than the window, this prop allows passing a reference to that lement to allow the portal to position properly.                                                                                                                                                                                                                  |               |
+| `portalClassName` (deprecated) | `string`                                  | Passes the given className to the popover's portal container if the default portal container is being used.                                                                                                                                                                                                                                                                           |               |
+| `popoverZIndex` (deprecated)   | `number`                                  | Sets the z-index CSS property for the popover.                                                                                                                                                                                                                                                                                                                                        |               |
+| `darkMode`                     | `boolean`                                 | Determines whether or not the component will be rendered in dark theme.                                                                                                                                                                                                                                                                                                               |               |
 
 _Any other properties will be spread on the Menu `ul` container_
 
diff --git a/packages/menu/src/Menu.spec.tsx b/packages/menu/src/Menu.spec.tsx
index ab9e3a7f90..b5543d6d4a 100644
--- a/packages/menu/src/Menu.spec.tsx
+++ b/packages/menu/src/Menu.spec.tsx
@@ -10,6 +10,7 @@ import {
 import userEvent from '@testing-library/user-event';
 
 import { Optional } from '@leafygreen-ui/lib';
+import { RenderMode } from '@leafygreen-ui/popover';
 import { waitForTransition } from '@leafygreen-ui/testing-lib';
 
 import { LGIDs } from './constants';
@@ -234,9 +235,9 @@ describe('packages/menu', () => {
         expect(menuEl).not.toBeInTheDocument();
       });
 
-      test('Returns focus to trigger {usePortal: true}', async () => {
+      test(`Returns focus to trigger when renderMode=${RenderMode.TopLayer}`, async () => {
         const { openMenu, triggerEl } = renderMenu({
-          usePortal: true,
+          renderMode: RenderMode.TopLayer,
         });
         const { menuEl } = await openMenu();
 
@@ -245,9 +246,20 @@ describe('packages/menu', () => {
         expect(triggerEl).toHaveFocus();
       });
 
-      test('Returns focus to trigger {usePortal: false}', async () => {
+      test(`Returns focus to trigger when renderMode=${RenderMode.Portal}`, async () => {
         const { openMenu, triggerEl } = renderMenu({
-          usePortal: false,
+          renderMode: RenderMode.Portal,
+        });
+        const { menuEl } = await openMenu();
+
+        userEventInteraction(menuEl!, key);
+        await waitForElementToBeRemoved(menuEl);
+        expect(triggerEl).toHaveFocus();
+      });
+
+      test(`Returns focus to trigger when renderMode=${RenderMode.Inline}`, async () => {
+        const { openMenu, triggerEl } = renderMenu({
+          renderMode: RenderMode.Inline,
         });
         const { menuEl } = await openMenu();
 
@@ -262,12 +274,16 @@ describe('packages/menu', () => {
         test('highlights the next option in the menu', async () => {
           const { openMenu } = renderMenu({});
           const { menuItemElements } = await openMenu();
+          await waitFor(() => expect(menuItemElements[0]).toHaveFocus());
+
           userEvent.keyboard('{arrowdown}');
           expect(menuItemElements[1]).toHaveFocus();
         });
+
         test('cycles highlight to the top', async () => {
           const { openMenu } = renderMenu({});
           const { menuItemElements } = await openMenu();
+          await waitFor(() => expect(menuItemElements[0]).toHaveFocus());
 
           for (let i = 0; i < menuItemElements.length; i++) {
             userEvent.keyboard('{arrowdown}');
@@ -291,7 +307,7 @@ describe('packages/menu', () => {
 
             const { menuItemElements } = await openMenu();
             expect(menuItemElements).toHaveLength(3);
-            expect(queryByTestId('submenu')).toHaveFocus();
+            await waitFor(() => expect(queryByTestId('submenu')).toHaveFocus());
             userEvent.keyboard('{arrowdown}');
             expect(queryByTestId('item-a')).toHaveFocus();
           });
@@ -311,7 +327,7 @@ describe('packages/menu', () => {
 
             const { menuItemElements } = await openMenu();
             expect(menuItemElements).toHaveLength(2);
-            expect(queryByTestId('submenu')).toHaveFocus();
+            await waitFor(() => expect(queryByTestId('submenu')).toHaveFocus());
             userEvent.keyboard('{arrowdown}');
             expect(queryByTestId('item-c')).toHaveFocus();
           });
@@ -322,14 +338,17 @@ describe('packages/menu', () => {
         test('highlights the previous option in the menu', async () => {
           const { openMenu } = renderMenu({});
           const { menuItemElements } = await openMenu();
+          await waitFor(() => expect(menuItemElements[0]).toHaveFocus());
 
           userEvent.keyboard('{arrowdown}');
           userEvent.keyboard('{arrowup}');
           expect(menuItemElements[0]).toHaveFocus();
         });
+
         test('cycles highlight to the bottom', async () => {
           const { openMenu } = renderMenu({});
           const { menuItemElements } = await openMenu();
+          await waitFor(() => expect(menuItemElements[0]).toHaveFocus());
 
           const lastOption = menuItemElements[menuItemElements.length - 1];
           userEvent.keyboard('{arrowup}');
@@ -346,7 +365,7 @@ describe('packages/menu', () => {
 
       const firstItem = menuItemElements[0];
 
-      expect(firstItem).toHaveFocus();
+      await waitFor(() => expect(firstItem).toHaveFocus());
 
       userEvent.keyboard('[Enter]');
 
@@ -362,7 +381,7 @@ describe('packages/menu', () => {
 
       const firstItem = menuItemElements[0];
 
-      expect(firstItem).toHaveFocus();
+      await waitFor(() => expect(firstItem).toHaveFocus());
 
       userEvent.keyboard('[Space]');
 
@@ -393,7 +412,7 @@ describe('packages/menu', () => {
       });
 
       await openMenu();
-      expect(queryByTestId('submenu')).toHaveFocus();
+      await waitFor(() => expect(queryByTestId('submenu')).toHaveFocus());
       userEvent.click(getByTestId(LGIDs.submenuToggle)!);
       await waitForTransition();
       await waitFor(() => {
@@ -417,7 +436,7 @@ describe('packages/menu', () => {
       });
 
       await openMenu();
-      expect(queryByTestId('submenu')).toHaveFocus();
+      await waitFor(() => expect(queryByTestId('submenu')).toHaveFocus());
       userEvent.keyboard('{arrowright}');
       userEvent.keyboard('{arrowdown}');
       expect(queryByTestId('item-a')).toHaveFocus();
@@ -450,7 +469,7 @@ describe('packages/menu', () => {
         ),
       });
       await openMenu();
-      expect(queryByTestId('submenu')).toHaveFocus();
+      await waitFor(() => expect(queryByTestId('submenu')).toHaveFocus());
       userEvent.keyboard('{arrowup}');
       expect(queryByTestId('item-c')).toHaveFocus();
 
@@ -479,7 +498,7 @@ describe('packages/menu', () => {
         ),
       });
       await openMenu();
-      expect(queryByTestId('submenu')).toHaveFocus();
+      await waitFor(() => expect(queryByTestId('submenu')).toHaveFocus());
       userEvent.keyboard('{arrowright}'); // open the submenu
       userEvent.keyboard('{arrowup}');
       expect(queryByTestId('item-c')).toHaveFocus();
diff --git a/packages/menu/src/Menu.stories.tsx b/packages/menu/src/Menu.stories.tsx
index acf86fd275..f23c08b677 100644
--- a/packages/menu/src/Menu.stories.tsx
+++ b/packages/menu/src/Menu.stories.tsx
@@ -14,7 +14,7 @@ import Icon from '@leafygreen-ui/icon';
 import CaretDown from '@leafygreen-ui/icon/dist/CaretDown';
 import CloudIcon from '@leafygreen-ui/icon/dist/Cloud';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
-import { Align, Justify } from '@leafygreen-ui/popover';
+import { Align, Justify, RenderMode } from '@leafygreen-ui/popover';
 import { TestUtils } from '@leafygreen-ui/popover';
 
 const { getAlign, getJustify } = TestUtils;
@@ -62,7 +62,7 @@ export default {
         'setOpen',
         'size',
         'trigger',
-        'usePortal',
+        'renderMode',
       ],
     },
     chromatic: {
@@ -70,8 +70,8 @@ export default {
     },
   },
   args: {
-    align: 'bottom',
-    usePortal: true,
+    align: Align.Bottom,
+    renderMode: RenderMode.TopLayer,
     darkMode: false,
     renderDarkMenu: false,
   },
@@ -198,7 +198,7 @@ export const Controlled = {
         'setOpen',
         'as',
         'portalRef',
-        'usePortal',
+        'renderMode',
         'align',
         'darkMode',
         'justify',
diff --git a/packages/menu/src/Menu/Menu.tsx b/packages/menu/src/Menu/Menu.tsx
index 611fa27ff1..c9d3b28ed7 100644
--- a/packages/menu/src/Menu/Menu.tsx
+++ b/packages/menu/src/Menu/Menu.tsx
@@ -9,7 +9,13 @@ import { css, cx } from '@leafygreen-ui/emotion';
 import { useBackdropClick, useEventListener } from '@leafygreen-ui/hooks';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { isDefined, keyMap, Theme } from '@leafygreen-ui/lib';
-import Popover, { Align, Justify } from '@leafygreen-ui/popover';
+import Popover, {
+  Align,
+  DismissMode,
+  getPopoverRenderModeProps,
+  Justify,
+  RenderMode,
+} from '@leafygreen-ui/popover';
 
 import { LGIDs } from '../constants';
 import { useHighlightReducer } from '../HighlightReducer';
@@ -40,7 +46,7 @@ import { MenuProps } from './Menu.types';
  * @param props.align Alignment of Menu relative to another element: `top`, `bottom`, `left`, `right`.
  * @param props.justify Justification of Menu relative to another element: `start`, `middle`, `end`.
  * @param props.refEl Reference element that Menu should be positioned against.
- * @param props.usePortal Boolean to describe if content should be portaled to end of DOM, or appear in DOM tree.
+ * @param props.renderMode Options to render the popover element: `inline`, `portal`, `top-layer`.
  * @param props.trigger Trigger element can be ReactNode or function, and, if present, internally manages active state of Menu.
  * @param props.darkMode Determines whether or not the component will be rendered in dark theme.
  */
@@ -52,7 +58,6 @@ export const Menu = React.forwardRef<HTMLDivElement, MenuProps>(function Menu(
     shouldClose = () => true,
     spacing = 6,
     maxHeight = 344,
-    usePortal = true,
     initialOpen = false,
     open: controlledOpen,
     setOpen: controlledSetOpen,
@@ -62,6 +67,7 @@ export const Menu = React.forwardRef<HTMLDivElement, MenuProps>(function Menu(
     className,
     refEl,
     trigger,
+    renderMode = RenderMode.TopLayer,
     portalClassName,
     portalContainer,
     portalRef,
@@ -133,7 +139,7 @@ export const Menu = React.forwardRef<HTMLDivElement, MenuProps>(function Menu(
         break;
 
       case keyMap.Tab:
-        e.preventDefault(); // Prevent tabbing outside of portal and outside of the DOM when `usePortal={true}`
+        e.preventDefault(); // Prevent tabbing outside of portal and outside of the DOM when `renderMode="portal"`
         handleClose();
         (refEl || triggerRef)?.current?.focus(); // Focus the trigger on close
         break;
@@ -156,17 +162,16 @@ export const Menu = React.forwardRef<HTMLDivElement, MenuProps>(function Menu(
 
   const popoverProps = {
     popoverZIndex,
-    ...(usePortal
-      ? {
-          spacing,
-          usePortal,
-          portalClassName,
-          portalContainer,
-          portalRef,
-          scrollContainer,
-        }
-      : { spacing, usePortal }),
-  };
+    spacing,
+    ...getPopoverRenderModeProps({
+      dismissMode: DismissMode.Manual,
+      portalClassName,
+      portalContainer,
+      portalRef,
+      renderMode,
+      scrollContainer,
+    }),
+  } as const;
 
   const popoverContent = (
     <MenuDescendantsProvider>
@@ -289,7 +294,7 @@ Menu.propTypes = {
         ? PropTypes.instanceOf(Element)
         : PropTypes.any,
   }),
-  usePortal: PropTypes.bool,
+  renderMode: PropTypes.oneOf(Object.values(RenderMode)),
   trigger: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   open: PropTypes.bool,
   setOpen: PropTypes.func,
diff --git a/packages/menu/src/Menu/Menu.types.ts b/packages/menu/src/Menu/Menu.types.ts
index 0faaacb6b8..48399be7df 100644
--- a/packages/menu/src/Menu/Menu.types.ts
+++ b/packages/menu/src/Menu/Menu.types.ts
@@ -12,7 +12,8 @@ export type SubMenuType = ReactElement<
   InferredPolymorphicPropsWithRef<PolymorphicAs, SubMenuProps>
 >;
 
-export interface MenuProps extends Omit<PopoverProps, 'active'> {
+export interface MenuProps
+  extends Omit<PopoverProps, 'active' | 'dismissMode' | 'onToggle'> {
   /**
    * The menu items, or submenus
    * @type `<MenuItem />` | `<SubMenu />` | `<MenuGroup />` | `<MenuSeparator />`
diff --git a/packages/modal/src/Modal/ModalView.tsx b/packages/modal/src/Modal/ModalView.tsx
index 35853caed7..7919691a0e 100644
--- a/packages/modal/src/Modal/ModalView.tsx
+++ b/packages/modal/src/Modal/ModalView.tsx
@@ -9,6 +9,7 @@ import XIcon from '@leafygreen-ui/icon/dist/X';
 import IconButton from '@leafygreen-ui/icon-button';
 import LeafyGreenProvider, {
   PopoverProvider,
+  RenderMode,
   useDarkMode,
   usePopoverContext,
 } from '@leafygreen-ui/leafygreen-provider';
@@ -139,6 +140,7 @@ const ModalView = React.forwardRef(
                       )}
                     >
                       <PopoverProvider
+                        renderMode={RenderMode.Portal}
                         portalContainer={scrollContainerRef}
                         scrollContainer={scrollContainerRef}
                       >
diff --git a/packages/number-input/README.md b/packages/number-input/README.md
index f6fccb5062..fd80f1928c 100644
--- a/packages/number-input/README.md
+++ b/packages/number-input/README.md
@@ -62,29 +62,25 @@ or
 
 ## Properties
 
-| Prop              | Type                                                   | Description                                                                                                                                                                                                                                      | Default                             |
-| ----------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------- |
-| `id`              | `string`                                               | id associated with the number input.                                                                                                                                                                                                             |                                     |
-| `label`           | `string`                                               | Label shown above the number input.                                                                                                                                                                                                              |                                     |
-| `description`     | `string`                                               | Text shown above the number input but below the label; gives more details about the requirements for the input.                                                                                                                                  |                                     |
-| `value`           | `string`                                               | The controlled value of the number input.                                                                                                                                                                                                        |                                     |
-| `disabled`        | `boolean`                                              | Disables the component.                                                                                                                                                                                                                          | `false`                             |
-| `placeholder`     | `string`                                               | The placeholder text shown in the input field before the user begins typing.                                                                                                                                                                     |                                     |
-| `size`            | `'xsmall'` \| `'small'` \| `'default'` \| `'large'`    | Determines the size of the input.                                                                                                                                                                                                                | `default`                           |
-| `state`           | `'none'`\| `'error'`                                   | Describes the state of the TextInput element before and after the input has been validated                                                                                                                                                       | `'none'`                            |
-| `errorMessage`    | `string`                                               | Error message that appears below the input. Renders only if `state='error'`.                                                                                                                                                                     | `'This input needs your attention'` |
-| `successMessage`  | `string`                                               | Success message that appears below the input. Renders only if `state='valid'`.                                                                                                                                                                   | `'Success'`                         |
-| `unit`            | `string`                                               | The string unit that appears to the right of the input if using a single unit. </br> </br>Required if using `unitOptions`. When using `unitOptions` this value becomes the controlled value of the select input.                                 | `default`                           |
-| `unitOptions`     | `Array<{displayName: string; value: string}>`          | The options that appear in the select element attached to the right of the input.                                                                                                                                                                | `default`                           |
-| `onChange`        | `(e: React.ChangeEvent<HTMLInputElement>) => void`     | The event handler function for the 'onchange' event. Accepts the change event object as its argument and returns nothing.                                                                                                                        |
-| `onBlur`          | `(e: React.ChangeEvent<HTMLInputElement>) => void`     | The event handler function for the 'onblur' event. Accepts the focus event object as its argument and returns nothing.                                                                                                                           |                                     |
-| `onSelectChange`  | `(unit: {displayName: string; value: string}) => void` | A change handler triggered when the unit is changed.                                                                                                                                                                                             |
-| `className`       | `string`                                               | ClassName for the component.                                                                                                                                                                                                                     |                                     |
-| `inputClassName`  | `string`                                               | ClassName for the input component.                                                                                                                                                                                                               |                                     |
-| `selectClassName` | `string`                                               | ClassName for the select component.                                                                                                                                                                                                              |                                     |
-| `portalContainer` | `HTMLElement` \| `null`                                | Sets the container used for the popover's portal. NOTE: If using a `scrollContainer` make sure that the `portalContainer` is contained within the `scrollContainer`. E.g, passing the same reference to `scrollContainer` and `portalContainer`. |                                     |
-| `scrollContainer` | `HTMLElement` \| `null`                                | If the popover portal has a scrollable ancestor other than the window, this prop allows passing a reference to that element to allow the portal to position properly.                                                                            |                                     |
-| `portalClassName` | `string`                                               | Passes the given className to the popover's portal container if the default portal container is being used.                                                                                                                                      |                                     |
-| `popoverZIndex`   | `number`                                               | Sets the z-index CSS property for the popover.                                                                                                                                                                                                   |                                     |
-| `darkMode`        | `boolean`                                              | Render the component in dark mode.                                                                                                                                                                                                               | `false`                             |
-| ...               | native `input` attributes                              | Any other props will be spread on the root `input` element                                                                                                                                                                                       |                                     |
+| Prop              | Type                                                   | Description                                                                                                                                                                                                      | Default                             |
+| ----------------- | ------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
+| `id`              | `string`                                               | id associated with the number input.                                                                                                                                                                             |                                     |
+| `label`           | `string`                                               | Label shown above the number input.                                                                                                                                                                              |                                     |
+| `description`     | `string`                                               | Text shown above the number input but below the label; gives more details about the requirements for the input.                                                                                                  |                                     |
+| `value`           | `string`                                               | The controlled value of the number input.                                                                                                                                                                        |                                     |
+| `disabled`        | `boolean`                                              | Disables the component.                                                                                                                                                                                          | `false`                             |
+| `placeholder`     | `string`                                               | The placeholder text shown in the input field before the user begins typing.                                                                                                                                     |                                     |
+| `size`            | `'xsmall'` \| `'small'` \| `'default'` \| `'large'`    | Determines the size of the input.                                                                                                                                                                                | `default`                           |
+| `state`           | `'none'`\| `'error'`                                   | Describes the state of the TextInput element before and after the input has been validated                                                                                                                       | `'none'`                            |
+| `errorMessage`    | `string`                                               | Error message that appears below the input. Renders only if `state='error'`.                                                                                                                                     | `'This input needs your attention'` |
+| `successMessage`  | `string`                                               | Success message that appears below the input. Renders only if `state='valid'`.                                                                                                                                   | `'Success'`                         |
+| `unit`            | `string`                                               | The string unit that appears to the right of the input if using a single unit. </br> </br>Required if using `unitOptions`. When using `unitOptions` this value becomes the controlled value of the select input. | `default`                           |
+| `unitOptions`     | `Array<{displayName: string; value: string}>`          | The options that appear in the select element attached to the right of the input.                                                                                                                                | `default`                           |
+| `onChange`        | `(e: React.ChangeEvent<HTMLInputElement>) => void`     | The event handler function for the 'onchange' event. Accepts the change event object as its argument and returns nothing.                                                                                        |
+| `onBlur`          | `(e: React.ChangeEvent<HTMLInputElement>) => void`     | The event handler function for the 'onblur' event. Accepts the focus event object as its argument and returns nothing.                                                                                           |                                     |
+| `onSelectChange`  | `(unit: {displayName: string; value: string}) => void` | A change handler triggered when the unit is changed.                                                                                                                                                             |
+| `className`       | `string`                                               | ClassName for the component.                                                                                                                                                                                     |                                     |
+| `inputClassName`  | `string`                                               | ClassName for the input component.                                                                                                                                                                               |                                     |
+| `selectClassName` | `string`                                               | ClassName for the select component.                                                                                                                                                                              |                                     |
+| `darkMode`        | `boolean`                                              | Render the component in dark mode.                                                                                                                                                                               | `false`                             |
+| ...               | native `input` attributes                              | Any other props will be spread on the root `input` element                                                                                                                                                       |                                     |
diff --git a/packages/number-input/src/NumberInput.stories.tsx b/packages/number-input/src/NumberInput.stories.tsx
index 544ecd94eb..632149b961 100644
--- a/packages/number-input/src/NumberInput.stories.tsx
+++ b/packages/number-input/src/NumberInput.stories.tsx
@@ -33,6 +33,17 @@ const unitOptions = [
 const meta: StoryMetaType<typeof NumberInput> = {
   title: 'Components/NumberInput',
   component: NumberInput,
+  decorators: [
+    StoryFn => (
+      <div
+        className={css`
+          height: 100vh;
+        `}
+      >
+        <StoryFn />
+      </div>
+    ),
+  ],
   parameters: {
     default: 'LiveExample',
     controls: {
diff --git a/packages/number-input/src/NumberInput/NumberInput.spec.tsx b/packages/number-input/src/NumberInput/NumberInput.spec.tsx
index 4801bc447a..f65526e539 100644
--- a/packages/number-input/src/NumberInput/NumberInput.spec.tsx
+++ b/packages/number-input/src/NumberInput/NumberInput.spec.tsx
@@ -1,4 +1,4 @@
-import React, { createRef } from 'react';
+import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
@@ -351,21 +351,6 @@ describe('packages/number-input', () => {
         value: selectProps.unitOptions[1].value,
       });
     });
-
-    test('accepts a portalRef', () => {
-      const portalContainer = document.createElement('div');
-      document.body.appendChild(portalContainer);
-      const portalRef = createRef<HTMLElement>();
-      const { getByRole } = renderNumberInput({
-        ...selectProps,
-        portalContainer,
-        portalRef,
-      });
-      const trigger = getByRole('button', { name: unitProps.unit });
-      fireEvent.click(trigger);
-      expect(portalRef.current).toBeDefined();
-      expect(portalRef.current).toBe(portalContainer);
-    });
   });
 
   /* eslint-disable jest/no-disabled-tests */
@@ -418,54 +403,6 @@ describe('packages/number-input', () => {
         id="1"
         size={Size.Default}
       />
-
-      {/* @ts-expect-error - portalClassName should be undefined */}
-      <NumberInput
-        unit={unitProps.unit}
-        unitOptions={selectProps.unitOptions}
-        onSelectChange={() => {}}
-        label={label}
-        usePortal={false}
-        portalClassName="classname"
-      />
-
-      {/* @ts-expect-error - scrollContainer should be undefined */}
-      <NumberInput
-        unit={unitProps.unit}
-        unitOptions={selectProps.unitOptions}
-        onSelectChange={() => {}}
-        label={label}
-        usePortal={false}
-        scrollContainer={{} as HTMLElement}
-      />
-
-      {/* @ts-expect-error - portalContainer should be undefined */}
-      <NumberInput
-        unit={unitProps.unit}
-        unitOptions={selectProps.unitOptions}
-        onSelectChange={() => {}}
-        label={label}
-        usePortal={false}
-        portalContainer={{} as HTMLElement}
-      />
-
-      <NumberInput
-        unit={unitProps.unit}
-        unitOptions={selectProps.unitOptions}
-        onSelectChange={() => {}}
-        label={label}
-        usePortal={false}
-      />
-
-      <NumberInput
-        unit={unitProps.unit}
-        unitOptions={selectProps.unitOptions}
-        onSelectChange={() => {}}
-        label={label}
-        portalContainer={{} as HTMLElement}
-        scrollContainer={{} as HTMLElement}
-        portalClassName="classname"
-      />
     </>;
   });
 });
diff --git a/packages/number-input/src/NumberInput/NumberInput.tsx b/packages/number-input/src/NumberInput/NumberInput.tsx
index 6bb5702b5c..c9550eab3e 100644
--- a/packages/number-input/src/NumberInput/NumberInput.tsx
+++ b/packages/number-input/src/NumberInput/NumberInput.tsx
@@ -46,12 +46,6 @@ export const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
       errorMessage = DEFAULT_MESSAGES.error,
       successMessage = DEFAULT_MESSAGES.success,
       onChange,
-      popoverZIndex,
-      usePortal = true,
-      portalClassName,
-      portalContainer,
-      portalRef,
-      scrollContainer,
       ...rest
     }: NumberInputProps,
     forwardedRef,
@@ -70,19 +64,6 @@ export const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
     const renderUnitOnly = hasUnit && !hasSelectOptions;
     const renderSelectOnly = hasUnit && hasSelectOptions && !!isUnitInOptions;
 
-    const popoverProps = {
-      popoverZIndex,
-      ...(usePortal
-        ? {
-            usePortal,
-            portalClassName,
-            portalContainer,
-            portalRef,
-            scrollContainer,
-          }
-        : { usePortal }),
-    } as const;
-
     const formFieldFeedbackProps = {
       disabled,
       errorMessage,
@@ -152,7 +133,6 @@ export const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
                 onChange={onSelectChange}
                 size={size}
                 className={selectClassName}
-                {...popoverProps}
               />
             )}
           </div>
@@ -190,21 +170,4 @@ NumberInput.propTypes = {
       value: PropTypes.string.isRequired,
     }),
   ),
-  // Popover Props
-  popoverZIndex: PropTypes.number,
-  scrollContainer:
-    typeof window !== 'undefined'
-      ? PropTypes.instanceOf(Element)
-      : PropTypes.any,
-  portalContainer:
-    typeof window !== 'undefined'
-      ? PropTypes.instanceOf(Element)
-      : PropTypes.any,
-  portalRef: PropTypes.shape({
-    current:
-      typeof window !== 'undefined'
-        ? PropTypes.instanceOf(Element)
-        : PropTypes.any,
-  }),
-  portalClassName: PropTypes.string,
 } as any;
diff --git a/packages/number-input/src/NumberInput/NumberInput.types.ts b/packages/number-input/src/NumberInput/NumberInput.types.ts
index 4e3a3861d8..4bb531343b 100644
--- a/packages/number-input/src/NumberInput/NumberInput.types.ts
+++ b/packages/number-input/src/NumberInput/NumberInput.types.ts
@@ -8,8 +8,6 @@ import { AriaLabelPropsWithLabel } from '@leafygreen-ui/a11y';
 import { FormFieldState } from '@leafygreen-ui/form-field';
 import { DarkModeProps } from '@leafygreen-ui/lib';
 
-import { PopoverProps } from '../UnitSelect/UnitSelect.types';
-
 export const Direction = {
   Increment: 'increment',
   Decrement: 'decrement',
@@ -154,5 +152,4 @@ export interface BaseNumberInputProps
 
 export type NumberInputProps = BaseNumberInputProps &
   ConditionalUnitSelectProps &
-  PopoverProps &
   AriaLabelPropsWithLabel;
diff --git a/packages/number-input/src/UnitSelect/UnitSelect.tsx b/packages/number-input/src/UnitSelect/UnitSelect.tsx
index 2dd4ed0c86..f561f00b0f 100644
--- a/packages/number-input/src/UnitSelect/UnitSelect.tsx
+++ b/packages/number-input/src/UnitSelect/UnitSelect.tsx
@@ -2,7 +2,12 @@ import React from 'react';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
-import { DropdownWidthBasis, Option, Select } from '@leafygreen-ui/select';
+import {
+  DropdownWidthBasis,
+  Option,
+  RenderMode,
+  Select,
+} from '@leafygreen-ui/select';
 
 import { UnitOption } from '../NumberInput/NumberInput.types';
 import { UnitSelectButton } from '../UnitSelectButton';
@@ -24,26 +29,11 @@ export function UnitSelect({
   unitOptions,
   onChange,
   disabled,
-  usePortal,
   size,
   className,
-  portalClassName,
-  portalContainer,
-  portalRef,
-  scrollContainer,
-  popoverZIndex,
 }: UnitSelectProps) {
   const { theme } = useDarkMode();
 
-  const popoverProps = {
-    popoverZIndex,
-    usePortal,
-    portalClassName,
-    portalContainer,
-    portalRef,
-    scrollContainer,
-  } as const;
-
   /**
    * Gets the current unit option using the unit string
    */
@@ -78,7 +68,7 @@ export function UnitSelect({
         disabled={disabled}
         size={size}
         data-testid={dataTestId}
-        {...popoverProps}
+        renderMode={RenderMode.TopLayer}
         __INTERNAL__menuButtonSlot__={UnitSelectButton}
         __INTERNAL__menuButtonSlotProps__={{
           disabled,
diff --git a/packages/number-input/src/UnitSelect/UnitSelect.types.ts b/packages/number-input/src/UnitSelect/UnitSelect.types.ts
index 0fd84f12ca..414c60eceb 100644
--- a/packages/number-input/src/UnitSelect/UnitSelect.types.ts
+++ b/packages/number-input/src/UnitSelect/UnitSelect.types.ts
@@ -1,14 +1,6 @@
-import {
-  PopoverProps as ImportedPopoverProps,
-  PopoverRenderModeProps,
-} from '@leafygreen-ui/popover';
-
 import { Size, UnitOption } from '../NumberInput/NumberInput.types';
 
-export type PopoverProps = PopoverRenderModeProps &
-  Pick<ImportedPopoverProps, 'popoverZIndex'>;
-
-export type UnitSelectProps = {
+export interface UnitSelectProps {
   /**
    * Id for the select component.
    */
@@ -51,4 +43,4 @@ export type UnitSelectProps = {
    * @internal
    */
   ['data-testid']?: string;
-} & PopoverProps;
+}
diff --git a/packages/number-input/src/UnitSelectButton/UnitSelectButton.tsx b/packages/number-input/src/UnitSelectButton/UnitSelectButton.tsx
index cae356ee07..99b353afae 100644
--- a/packages/number-input/src/UnitSelectButton/UnitSelectButton.tsx
+++ b/packages/number-input/src/UnitSelectButton/UnitSelectButton.tsx
@@ -10,7 +10,7 @@ import {
   popoverClassName,
 } from '@leafygreen-ui/select';
 import { Size } from '@leafygreen-ui/tokens';
-import Tooltip from '@leafygreen-ui/tooltip';
+import Tooltip, { Align, Justify, RenderMode } from '@leafygreen-ui/tooltip';
 
 import {
   baseStyles,
@@ -34,12 +34,6 @@ export const UnitSelectButton = React.forwardRef(
       children,
       disabled,
       displayName,
-      popoverZIndex,
-      usePortal,
-      portalClassName,
-      portalContainer,
-      portalRef,
-      scrollContainer,
       ...props
     }: UnitSelectButtonProps,
     forwardedRef,
@@ -51,14 +45,6 @@ export const UnitSelectButton = React.forwardRef(
         null,
       ) as React.MutableRefObject<HTMLElement | null>;
     const { theme } = useDarkMode();
-    const popoverProps = {
-      popoverZIndex,
-      usePortal,
-      portalClassName,
-      portalContainer,
-      portalRef,
-      scrollContainer,
-    } as const;
 
     /**
      * Gets the text node for the selected option.
@@ -99,12 +85,13 @@ export const UnitSelectButton = React.forwardRef(
     return (
       <div className={wrapperStyles}>
         <Tooltip
+          align={Align.Top}
           enabled={isEnabled}
-          justify="middle"
+          justify={Justify.Middle}
           // Using refEl instead of a trigger element because triggerProps by default, such as onMouseEnter, are added to the trigger element inside the tooltip component. OnMouseEnter is triggered by hovering over the trigger or any of its children. In the case of this custom menu button we don't want the tooltip to open when children are hovered so we add our own open logic with onMouseEnter.
-          refEl={buttonRef}
           open={open}
-          {...popoverProps}
+          refEl={buttonRef}
+          renderMode={RenderMode.TopLayer}
         >
           {displayName}
         </Tooltip>
diff --git a/packages/number-input/src/UnitSelectButton/UnitSelectButton.types.ts b/packages/number-input/src/UnitSelectButton/UnitSelectButton.types.ts
index 1babce97d9..3f68de4186 100644
--- a/packages/number-input/src/UnitSelectButton/UnitSelectButton.types.ts
+++ b/packages/number-input/src/UnitSelectButton/UnitSelectButton.types.ts
@@ -1,6 +1,6 @@
 import { ButtonProps } from '@leafygreen-ui/button';
 
-import { PopoverProps, UnitSelectProps } from '../UnitSelect/UnitSelect.types';
+import { UnitSelectProps } from '../UnitSelect/UnitSelect.types';
 
 export type UnitSelectButtonProps = {
   /**
@@ -12,5 +12,4 @@ export type UnitSelectButtonProps = {
    * The select option that is shown in the select menu button.
    */
   displayName?: string;
-} & ButtonProps &
-  PopoverProps;
+} & ButtonProps;
diff --git a/packages/pagination/src/Pagination/Pagination.tsx b/packages/pagination/src/Pagination/Pagination.tsx
index 439ec822f0..9dc40f0a0e 100644
--- a/packages/pagination/src/Pagination/Pagination.tsx
+++ b/packages/pagination/src/Pagination/Pagination.tsx
@@ -9,7 +9,12 @@ import ChevronRight from '@leafygreen-ui/icon/dist/ChevronRight';
 import IconButton from '@leafygreen-ui/icon-button';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
-import { DropdownWidthBasis, Option, Select } from '@leafygreen-ui/select';
+import {
+  DropdownWidthBasis,
+  Option,
+  RenderMode,
+  Select,
+} from '@leafygreen-ui/select';
 import { Body } from '@leafygreen-ui/typography';
 
 import { baseStyles, flexSectionStyles } from './Pagination.styles';
@@ -92,6 +97,7 @@ function Pagination<T extends number>({
                 allowDeselect={false}
                 size="xsmall"
                 dropdownWidthBasis={DropdownWidthBasis.Option}
+                renderMode={RenderMode.TopLayer}
               >
                 {itemsPerPageOptions.map((option: number) => (
                   <Option key={option} value={String(option)}>
@@ -119,6 +125,7 @@ function Pagination<T extends number>({
                 size="xsmall"
                 data-testid="lg-pagination-page-select"
                 dropdownWidthBasis={DropdownWidthBasis.Option}
+                renderMode={RenderMode.TopLayer}
               >
                 {range(
                   1,
diff --git a/packages/pipeline/src/Pipeline.tsx b/packages/pipeline/src/Pipeline.tsx
index 38c9cb9b5c..48f3c8890a 100644
--- a/packages/pipeline/src/Pipeline.tsx
+++ b/packages/pipeline/src/Pipeline.tsx
@@ -12,7 +12,7 @@ import { cx } from '@leafygreen-ui/emotion';
 import { useMutationObserver } from '@leafygreen-ui/hooks';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { isComponentType } from '@leafygreen-ui/lib';
-import Tooltip from '@leafygreen-ui/tooltip';
+import Tooltip, { Align, Justify, RenderMode } from '@leafygreen-ui/tooltip';
 
 import Counter from './Counter';
 import { PipelineContext } from './PipelineContext';
@@ -147,8 +147,11 @@ const Pipeline = forwardRef(
 
           {/* Removing the component was causing an unmounted error so instead we're hiding it with css */}
           <Tooltip
-            align="top"
-            justify="middle"
+            align={Align.Top}
+            className={tooltipStyles}
+            darkMode={darkMode}
+            justify={Justify.Middle}
+            renderMode={RenderMode.TopLayer}
             trigger={
               <Counter
                 className={cx({
@@ -157,8 +160,6 @@ const Pipeline = forwardRef(
               />
             }
             triggerEvent="hover"
-            darkMode={darkMode}
-            className={tooltipStyles}
           >
             <TooltipText hiddenStages={hiddenStages} />
           </Tooltip>
diff --git a/packages/popover/README.md b/packages/popover/README.md
index 4069eb4586..76a2e66c97 100644
--- a/packages/popover/README.md
+++ b/packages/popover/README.md
@@ -90,16 +90,15 @@ In pre-v12 versions, a popover can be rendered in 2 ways using the `usePortal` p
 
 ### v12+
 
-| Prop                           | Type                                      | Description                                                                                                                                                                                                                                                                                                                                                       | Default  |
-| ------------------------------ | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
-| `dismissMode`                  | `'auto'` \| `'manual'`                    | Options to control how the popover element is dismissed. This will only apply when `usePortal` is undefined and `renderMode` is `'top-layer'` <br> \* `'auto'` will automatically handle dismissal on backdrop click or esc key press, ensuring only one popover is visible at a time <br> \* `'manual'` will require that the consumer handle dismissal manually | `'auto'` |
-| `onToggle`                     | `(e: ToggleEvent) => void;`               | Function that is called when the popover is toggled. This will only apply when `usePortal` is undefined and `renderMode` is `'top-layer'`                                                                                                                                                                                                                         |          |
-| `portalClassName` (deprecated) | `string`                                  | Passes the given className to the popover's portal container if the default portal container is being used. This will only apply when `usePortal` is `true`                                                                                                                                                                                                       |          |
-| `portalContainer` (deprecated) | `HTMLElement` \| `null`                   | Sets the container used for the popover's portal. This will only apply when `usePortal` is `true`. <br> NOTE: If using a `scrollContainer` make sure that the `portalContainer` is contained within the `scrollContainer`. E.g, passing the same reference to `scrollContainer` and `portalContainer`.                                                            |          |
-| `portalRef` (deprecated)       | `string`                                  | Passes a ref to forward to the portal element. This will only apply when `usePortal` is `true`                                                                                                                                                                                                                                                                    |          |
-| `scrollContainer` (deprecated) | `HTMLElement` \| `null`                   | If the popover portal has a scrollable ancestor other than the window, this prop allows passing a reference to that element to allow the portal to position properly. This will only apply when `usePortal` is `true`                                                                                                                                             |          |
-| `renderMode`                   | `'inline'` \| `'portal'` \| `'top-layer'` | Options to render the popover element <br> \* [deprecated] `'inline'` will render the popover element inline with the reference element <br> \* [deprecated] `'portal'` will render the popover element in a provided `portalContainer` or in a new div appended to the body <br> \* `'top-layer'` will render the popover element in the top layer               | `'auto'` |
-| `usePortal` (deprecated)       | `boolean`                                 | Migration escape hatch that can be defined to override `renderMode`. <br> When `true`, it will set `renderMode` to `'portal'` <br> When `false`, it will set `renderMode` to `'inline'`                                                                                                                                                                           |          |
+| Prop                           | Type                                      | Description                                                                                                                                                                                                                                                                                                                                                                           | Default       |
+| ------------------------------ | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
+| `dismissMode`                  | `'auto'` \| `'manual'`                    | Options to control how the popover element is dismissed. This will only apply when `usePortal` is undefined and `renderMode` is `'top-layer'` <br> \* `'auto'` will automatically handle dismissal on backdrop click or esc key press, ensuring only one popover is visible at a time <br> \* `'manual'` will require that the consumer handle dismissal manually                     | `'auto'`      |
+| `onToggle`                     | `(e: ToggleEvent) => void;`               | Function that is called when the popover is toggled. This will only apply when `usePortal` is undefined and `renderMode` is `'top-layer'`                                                                                                                                                                                                                                             |               |
+| `portalClassName` (deprecated) | `string`                                  | Passes the given className to the popover's portal container if the default portal container is being used. This will only apply when `usePortal` is `true`                                                                                                                                                                                                                           |               |
+| `portalContainer` (deprecated) | `HTMLElement` \| `null`                   | Sets the container used for the popover's portal. This will only apply when `usePortal` is `true`. <br> NOTE: If using a `scrollContainer` make sure that the `portalContainer` is contained within the `scrollContainer`. E.g, passing the same reference to `scrollContainer` and `portalContainer`.                                                                                |               |
+| `portalRef` (deprecated)       | `string`                                  | Passes a ref to forward to the portal element. This will only apply when `usePortal` is `true`                                                                                                                                                                                                                                                                                        |               |
+| `scrollContainer` (deprecated) | `HTMLElement` \| `null`                   | If the popover portal has a scrollable ancestor other than the window, this prop allows passing a reference to that element to allow the portal to position properly. This will only apply when `usePortal` is `true`                                                                                                                                                                 |               |
+| `renderMode`                   | `'inline'` \| `'portal'` \| `'top-layer'` | Options to render the popover element <br> \* [deprecated] `'inline'` will render the popover element inline in the DOM where it's written <br> \* [deprecated] `'portal'` will render the popover element in a new div appended to the body. Alternatively, can be portaled into a provided `portalContainer` <br> \* `'top-layer'` will render the popover element in the top layer | `'top-layer'` |
 
 ### Pre-v12
 
diff --git a/packages/popover/src/Popover.stories.tsx b/packages/popover/src/Popover.stories.tsx
index b96713b610..4fac29daab 100644
--- a/packages/popover/src/Popover.stories.tsx
+++ b/packages/popover/src/Popover.stories.tsx
@@ -10,6 +10,7 @@ import { css, cx } from '@leafygreen-ui/emotion';
 import { palette } from '@leafygreen-ui/palette';
 import { color } from '@leafygreen-ui/tokens';
 
+import { getPopoverRenderModeProps } from './utils/getPopoverRenderModeProps';
 import {
   Align,
   DismissMode,
@@ -153,6 +154,7 @@ const meta: StoryMetaType<typeof Popover> = {
     buttonText: 'Button Text',
     dismissMode: DismissMode.Auto,
     justify: Justify.Start,
+    renderMode: RenderMode.TopLayer,
     spacing: 4,
   },
   argTypes: {
@@ -180,6 +182,10 @@ const meta: StoryMetaType<typeof Popover> = {
         'Storybook only prop. Used to change position of the reference button',
       defaultValue: 'centered',
     },
+    renderMode: {
+      options: Object.values(RenderMode),
+      control: { type: 'radio' },
+    },
   },
 };
 export default meta;
@@ -191,17 +197,18 @@ type PopoverStoryProps = PopoverProps & {
 export const LiveExample: StoryFn<PopoverStoryProps> = ({
   refButtonPosition,
   buttonText,
-  ...args
+  ...props
 }: PopoverStoryProps) => {
   const {
     portalClassName,
     portalContainer,
     portalRef,
     scrollContainer,
-    usePortal,
+    dismissMode,
+    renderMode,
     onToggle,
     ...rest
-  } = args;
+  } = props;
   const buttonRef = useRef<HTMLButtonElement | null>(null);
   const [active, setActive] = useState<boolean>(false);
 
@@ -217,6 +224,21 @@ export const LiveExample: StoryFn<PopoverStoryProps> = ({
     setActive(newActive);
   };
 
+  const popoverProps = {
+    active,
+    refEl: buttonRef,
+    ...getPopoverRenderModeProps({
+      dismissMode,
+      onToggle: handleToggle,
+      portalClassName,
+      portalContainer,
+      portalRef,
+      renderMode,
+      scrollContainer,
+    }),
+    ...rest,
+  };
+
   return (
     <div className={containerStyles}>
       <Button
@@ -226,13 +248,7 @@ export const LiveExample: StoryFn<PopoverStoryProps> = ({
       >
         {buttonText}
       </Button>
-      <Popover
-        {...rest}
-        active={active}
-        renderMode={RenderMode.TopLayer}
-        onToggle={handleToggle}
-        refEl={buttonRef}
-      >
+      <Popover {...popoverProps}>
         <div className={popoverStyle}>Popover content</div>
       </Popover>
     </div>
@@ -247,9 +263,9 @@ LiveExample.parameters = {
 const PortalPopoverInScrollableContainer = ({
   refButtonPosition,
   buttonText,
-  ...args
+  ...props
 }: PopoverStoryProps) => {
-  const { dismissMode, onToggle, renderMode, ...rest } = args;
+  const { dismissMode, onToggle, renderMode, ...rest } = props;
   const [active, setActive] = useState<boolean>(false);
   const portalRef = useRef<HTMLElement | null>(null);
   const scrollContainer = useRef<HTMLDivElement | null>(null);
@@ -267,7 +283,7 @@ const PortalPopoverInScrollableContainer = ({
           <Popover
             {...rest}
             active={active}
-            usePortal={true}
+            renderMode={RenderMode.Portal}
             portalContainer={scrollContainer.current}
             portalRef={portalRef}
             scrollContainer={scrollContainer.current}
@@ -301,7 +317,7 @@ export const RenderModePortalInScrollableContainer = {
 const InlinePopover = ({
   refButtonPosition,
   buttonText,
-  ...args
+  ...props
 }: PopoverStoryProps) => {
   const {
     dismissMode,
@@ -312,7 +328,7 @@ const InlinePopover = ({
     portalRef,
     scrollContainer,
     ...rest
-  } = args;
+  } = props;
   const buttonRef = useRef<HTMLButtonElement | null>(null);
   const [active, setActive] = useState<boolean>(false);
 
@@ -327,7 +343,12 @@ const InlinePopover = ({
       >
         {buttonText}
       </Button>
-      <Popover {...rest} active={active} refEl={buttonRef} usePortal={false}>
+      <Popover
+        {...rest}
+        active={active}
+        refEl={buttonRef}
+        renderMode={RenderMode.Inline}
+      >
         <div className={popoverStyle}>Popover content</div>
       </Popover>
     </div>
diff --git a/packages/popover/src/Popover/Popover.hooks.tsx b/packages/popover/src/Popover/Popover.hooks.tsx
index ce7d98228f..98c6bb017f 100644
--- a/packages/popover/src/Popover/Popover.hooks.tsx
+++ b/packages/popover/src/Popover/Popover.hooks.tsx
@@ -6,7 +6,6 @@ import {
 } from '@leafygreen-ui/hooks';
 import { usePopoverContext } from '@leafygreen-ui/leafygreen-provider';
 
-import { getRenderMode } from '../utils/getRenderMode';
 import { getElementDocumentPosition } from '../utils/positionUtils';
 
 import {
@@ -28,7 +27,6 @@ export function usePopoverContextProps({
   portalContainer,
   portalRef,
   scrollContainer,
-  usePortal: usePortalProp,
   onEnter,
   onEntering,
   onEntered,
@@ -51,10 +49,8 @@ export function usePopoverContextProps({
   >
 >) {
   const context = usePopoverContext();
-  const renderMode = getRenderMode(
-    renderModeProp || context.renderMode,
-    usePortalProp,
-  );
+  const renderMode =
+    renderModeProp || context.renderMode || RenderMode.TopLayer;
   const usePortal = renderMode === RenderMode.Portal;
   const popoverZIndex =
     renderMode === RenderMode.TopLayer
diff --git a/packages/popover/src/Popover/Popover.styles.ts b/packages/popover/src/Popover/Popover.styles.ts
index 68e7db9af8..6459e361e7 100644
--- a/packages/popover/src/Popover/Popover.styles.ts
+++ b/packages/popover/src/Popover/Popover.styles.ts
@@ -19,6 +19,7 @@ const getBasePopoverStyles = (floatingStyles: React.CSSProperties) => css`
   border: none;
   padding: 0;
   overflow: visible;
+  background-color: transparent;
 
   position: ${floatingStyles.position};
   top: ${floatingStyles.top}px;
diff --git a/packages/popover/src/Popover/Popover.tsx b/packages/popover/src/Popover/Popover.tsx
index e4ae747402..736c8e31ed 100644
--- a/packages/popover/src/Popover/Popover.tsx
+++ b/packages/popover/src/Popover/Popover.tsx
@@ -53,7 +53,7 @@ import {
  * @param props.className Classname applied to Popover container.
  * @param props.popoverZIndex Number that controls the z-index of the popover element directly.
  * @param props.refEl Reference element that Popover component should be positioned against.
- * @param props.usePortal Boolean to describe if content should be portaled to end of DOM, or appear in DOM tree.
+ * @param props.renderMode Options to render the popover element: `inline`, `portal`, `top-layer`.
  * @param props.portalClassName Classname applied to root element of the portal.
  * @param props.portalContainer HTML element that the popover is portaled within.
  * @param props.portalRef A ref for the Portal element.
@@ -221,8 +221,8 @@ export const Popover = forwardRef<HTMLDivElement, PopoverComponentProps>(
         nodeRef={contentNodeRef}
         in={context.open}
         timeout={{
-          appear: TRANSITION_DURATION - 100,
-          enter: TRANSITION_DURATION - 50,
+          appear: 0,
+          enter: TRANSITION_DURATION,
           exit: TRANSITION_DURATION,
         }}
         onEnter={onEnter}
@@ -290,7 +290,7 @@ Popover.propTypes = {
         : PropTypes.any,
   }),
   /// @ts-ignore Types of property '[nominalTypeHack]' are incompatible. - error only in R18
-  usePortal: PropTypes.bool,
+  renderMode: PropTypes.oneOf(Object.values(RenderMode)),
   /// @ts-ignore Types of property '[nominalTypeHack]' are incompatible. - error only in R18
   portalClassName: PropTypes.string,
   spacing: PropTypes.number,
diff --git a/packages/popover/src/Popover/Popover.types.ts b/packages/popover/src/Popover/Popover.types.ts
index 80b0b008e7..023e86e5e9 100644
--- a/packages/popover/src/Popover/Popover.types.ts
+++ b/packages/popover/src/Popover/Popover.types.ts
@@ -119,11 +119,12 @@ export interface ChildrenFunctionParameters {
 export interface RenderInlineProps {
   /**
    * Options to render the popover element
+   * @defaultValue 'top-layer'
    * @param Inline will render the popover element inline in the DOM where it's written. This option is deprecated and will be removed in the future.
    * @param Portal will render the popover element in a new div appended to the body. Alternatively, can be portaled into a provided `portalContainer`. This option is deprecated and will be removed in the future.
    * @param TopLayer will render the popover element in the top layer
    */
-  renderMode?: 'inline';
+  renderMode: 'inline';
 
   /**
    * When `renderMode="top-layer"`, these options can control how a popover element is dismissed
@@ -160,22 +161,17 @@ export interface RenderInlineProps {
    * @deprecated
    */
   scrollContainer?: never;
-
-  /**
-   * Duplicated by `renderMode='portal'`
-   * @deprecated TODO: https://jira.mongodb.org/browse/LG-4526
-   */
-  usePortal: false;
 }
 
 export interface RenderPortalProps {
   /**
    * Options to render the popover element
+   * @defaultValue 'top-layer'
    * @param Inline will render the popover element inline in the DOM where it's written. This option is deprecated and will be removed in the future.
    * @param Portal will render the popover element in a new div appended to the body. Alternatively, can be portaled into a provided `portalContainer`. This option is deprecated and will be removed in the future.
    * @param TopLayer will render the popover element in the top layer
    */
-  renderMode?: 'portal';
+  renderMode: 'portal';
 
   /**
    * When `renderMode="top-layer"`, these options can control how a popover element is dismissed
@@ -212,17 +208,12 @@ export interface RenderPortalProps {
    * @deprecated
    */
   scrollContainer?: HTMLElement | null;
-
-  /**
-   * Duplicated by `renderMode='portal'`
-   * @deprecated TODO: https://jira.mongodb.org/browse/LG-4526
-   */
-  usePortal?: true;
 }
 
 export interface RenderTopLayerProps {
   /**
    * Options to render the popover element
+   * @defaultValue 'top-layer'
    * @param Inline will render the popover element inline in the DOM where it's written. This option is deprecated and will be removed in the future.
    * @param Portal will render the popover element in a new div appended to the body. Alternatively, can be portaled into a provided `portalContainer`. This option is deprecated and will be removed in the future.
    * @param TopLayer will render the popover element in the top layer
@@ -264,12 +255,6 @@ export interface RenderTopLayerProps {
    * @deprecated
    */
   scrollContainer?: never;
-
-  /**
-   * Duplicated by `renderMode='portal'`
-   * @deprecated TODO: https://jira.mongodb.org/browse/LG-4526
-   */
-  usePortal?: never;
 }
 
 export type PopoverRenderModeProps =
@@ -329,6 +314,7 @@ export type PopoverProps = {
 
   /**
    * Number that controls the z-index of the popover element directly.
+   * @deprecated
    */
   popoverZIndex?: number;
 
diff --git a/packages/popover/src/index.ts b/packages/popover/src/index.ts
index 751c80a239..5f80c616d9 100644
--- a/packages/popover/src/index.ts
+++ b/packages/popover/src/index.ts
@@ -17,5 +17,6 @@ export {
   RenderMode,
   type ToggleEvent,
 } from './Popover';
+export { getPopoverRenderModeProps } from './utils/getPopoverRenderModeProps';
 
 export default Popover;
diff --git a/packages/popover/src/utils/getPopoverRenderModeProps.spec.ts b/packages/popover/src/utils/getPopoverRenderModeProps.spec.ts
new file mode 100644
index 0000000000..22abcdc5da
--- /dev/null
+++ b/packages/popover/src/utils/getPopoverRenderModeProps.spec.ts
@@ -0,0 +1,51 @@
+import { PopoverRenderModeProps, RenderMode } from '../Popover';
+
+import { getPopoverRenderModeProps } from './getPopoverRenderModeProps';
+
+const testProps = {
+  dismissMode: 'auto',
+  onToggle: jest.fn(),
+  portalClassName: 'portal-class',
+  portalContainer: document.createElement('div'),
+  portalRef: { current: null },
+  scrollContainer: document.createElement('div'),
+};
+
+describe('getPopoverRenderModeProps', () => {
+  test(`should return only renderMode when renderMode is ${RenderMode.Inline}`, () => {
+    const props = getPopoverRenderModeProps({
+      ...testProps,
+      renderMode: RenderMode.Inline,
+    });
+
+    expect(props).toEqual({ renderMode: RenderMode.Inline });
+  });
+
+  test(`should return portal related props when renderMode is ${RenderMode.Portal}`, () => {
+    const props = getPopoverRenderModeProps({
+      ...testProps,
+      renderMode: RenderMode.Portal,
+    });
+
+    expect(props).toEqual({
+      renderMode: RenderMode.Portal,
+      portalClassName: testProps.portalClassName,
+      portalContainer: testProps.portalContainer,
+      portalRef: testProps.portalRef,
+      scrollContainer: testProps.scrollContainer,
+    });
+  });
+
+  test(`should return top layer related props when renderMode is ${RenderMode.TopLayer}`, () => {
+    const props = getPopoverRenderModeProps({
+      ...testProps,
+      renderMode: RenderMode.TopLayer,
+    });
+
+    expect(props).toEqual({
+      renderMode: RenderMode.TopLayer,
+      dismissMode: testProps.dismissMode,
+      onToggle: testProps.onToggle,
+    });
+  });
+});
diff --git a/packages/popover/src/utils/getPopoverRenderModeProps.ts b/packages/popover/src/utils/getPopoverRenderModeProps.ts
new file mode 100644
index 0000000000..d4d61f63e7
--- /dev/null
+++ b/packages/popover/src/utils/getPopoverRenderModeProps.ts
@@ -0,0 +1,43 @@
+import { PopoverRenderModeProps, RenderMode } from '../Popover';
+
+/**
+ * Util function that returns relevant properties based on the `renderMode` prop
+ * @internal
+ */
+export const getPopoverRenderModeProps = ({
+  dismissMode,
+  onToggle,
+  portalClassName,
+  portalContainer,
+  portalRef,
+  renderMode,
+  scrollContainer,
+}: {
+  dismissMode?: PopoverRenderModeProps['dismissMode'];
+  onToggle?: PopoverRenderModeProps['onToggle'];
+  portalClassName?: PopoverRenderModeProps['portalClassName'];
+  portalContainer?: PopoverRenderModeProps['portalContainer'];
+  portalRef?: PopoverRenderModeProps['portalRef'];
+  renderMode: RenderMode;
+  scrollContainer?: PopoverRenderModeProps['scrollContainer'];
+}): PopoverRenderModeProps => {
+  if (renderMode === RenderMode.Inline) {
+    return { renderMode };
+  }
+
+  if (renderMode === RenderMode.Portal) {
+    return {
+      renderMode,
+      portalClassName,
+      portalContainer,
+      portalRef,
+      scrollContainer,
+    };
+  }
+
+  return {
+    dismissMode,
+    onToggle,
+    renderMode,
+  };
+};
diff --git a/packages/popover/src/utils/getRenderMode.test.ts b/packages/popover/src/utils/getRenderMode.test.ts
deleted file mode 100644
index 6adfb4e085..0000000000
--- a/packages/popover/src/utils/getRenderMode.test.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { RenderMode } from '../Popover/Popover.types';
-
-import { getRenderMode } from './getRenderMode';
-
-describe('getRenderMode', () => {
-  describe('when usePortal is defined', () => {
-    test(`should return ${RenderMode.Portal} when usePortal is true`, () => {
-      const renderMode = RenderMode.Portal;
-      const usePortal = true;
-      const result = getRenderMode(renderMode, usePortal);
-      expect(result).toBe(RenderMode.Portal);
-    });
-
-    test(`should return ${RenderMode.Inline} when usePortal is false`, () => {
-      const renderMode = RenderMode.Inline;
-      const usePortal = false;
-      const result = getRenderMode(renderMode, usePortal);
-      expect(result).toBe(RenderMode.Inline);
-    });
-  });
-
-  describe('when usePortal is undefined', () => {
-    const usePortal = undefined;
-    test(`should return ${RenderMode.TopLayer} when renderMode is undefined`, () => {
-      const renderMode = undefined;
-      const result = getRenderMode(renderMode, usePortal);
-      expect(result).toBe(RenderMode.TopLayer);
-    });
-
-    test(`should return ${RenderMode.TopLayer} when renderMode is ${RenderMode.TopLayer}`, () => {
-      const renderMode = RenderMode.TopLayer;
-      const result = getRenderMode(renderMode, usePortal);
-      expect(result).toBe(RenderMode.TopLayer);
-    });
-
-    test(`should return ${RenderMode.Inline} when renderMode is ${RenderMode.Inline}`, () => {
-      const renderMode = RenderMode.Inline;
-      const result = getRenderMode(renderMode, usePortal);
-      expect(result).toBe(RenderMode.Inline);
-    });
-
-    test(`should return ${RenderMode.Portal} when renderMode is ${RenderMode.Portal}`, () => {
-      const renderMode = RenderMode.Portal;
-      const result = getRenderMode(renderMode, usePortal);
-      expect(result).toBe(RenderMode.Portal);
-    });
-  });
-});
diff --git a/packages/popover/src/utils/getRenderMode.ts b/packages/popover/src/utils/getRenderMode.ts
deleted file mode 100644
index 5f805add2e..0000000000
--- a/packages/popover/src/utils/getRenderMode.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { RenderMode } from '../Popover/Popover.types';
-
-export function getRenderMode(
-  renderMode?: RenderMode,
-  usePortal?: boolean,
-): RenderMode {
-  if (usePortal !== undefined) {
-    if (usePortal) {
-      return RenderMode.Portal;
-    }
-
-    return RenderMode.Inline;
-  }
-
-  if (renderMode === undefined) {
-    return RenderMode.TopLayer;
-  }
-
-  return renderMode;
-}
diff --git a/packages/search-input/src/SearchInput/SearchInput.spec.tsx b/packages/search-input/src/SearchInput/SearchInput.spec.tsx
index d3dd79ac4c..fe085b4fb8 100644
--- a/packages/search-input/src/SearchInput/SearchInput.spec.tsx
+++ b/packages/search-input/src/SearchInput/SearchInput.spec.tsx
@@ -1,4 +1,4 @@
-import React, { createRef } from 'react';
+import React from 'react';
 import {
   createEvent,
   fireEvent,
@@ -113,20 +113,6 @@ describe('packages/search-input', () => {
       const { resultsElements } = getMenuElements();
       expect(resultsElements).toHaveLength(1);
     });
-
-    test('accepts a portalRef', () => {
-      const portalContainer = document.createElement('div');
-      document.body.appendChild(portalContainer);
-      const portalRef = createRef<HTMLElement>();
-      const { openMenu } = renderSearchInput({
-        ...defaultProps,
-        portalContainer,
-        portalRef,
-      });
-      openMenu();
-      expect(portalRef.current).toBeDefined();
-      expect(portalRef.current).toBe(portalContainer);
-    });
   });
 
   describe('Interaction', () => {
diff --git a/packages/search-input/src/SearchInput/SearchInput.tsx b/packages/search-input/src/SearchInput/SearchInput.tsx
index 469bde59bd..bfd247142f 100644
--- a/packages/search-input/src/SearchInput/SearchInput.tsx
+++ b/packages/search-input/src/SearchInput/SearchInput.tsx
@@ -82,11 +82,6 @@ export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
       onSubmit: onSubmitProp,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledby,
-      usePortal = true,
-      portalClassName,
-      portalContainer,
-      portalRef,
-      scrollContainer,
       ...rest
     }: SearchInputProps,
     forwardRef: React.Ref<HTMLInputElement>,
@@ -370,18 +365,6 @@ export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
       isOpen && withTypeAhead,
     );
 
-    const popoverProps = {
-      ...(usePortal
-        ? {
-            usePortal,
-            portalClassName,
-            portalContainer,
-            portalRef,
-            scrollContainer,
-          }
-        : { usePortal }),
-    };
-
     return (
       <LeafyGreenProvider darkMode={darkMode}>
         <SearchInputContextProvider
@@ -457,7 +440,6 @@ export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
                 open={isOpen}
                 refEl={searchBoxRef}
                 ref={menuRef}
-                {...popoverProps}
               >
                 {updatedChildren}
               </SearchResultsMenu>
diff --git a/packages/search-input/src/SearchInput/SearchInput.types.ts b/packages/search-input/src/SearchInput/SearchInput.types.ts
index 4800237809..f8c6a065be 100644
--- a/packages/search-input/src/SearchInput/SearchInput.types.ts
+++ b/packages/search-input/src/SearchInput/SearchInput.types.ts
@@ -6,7 +6,6 @@ import {
 
 import { AriaLabelProps } from '@leafygreen-ui/a11y';
 import { DarkModeProps } from '@leafygreen-ui/lib';
-import { PopoverProps } from '@leafygreen-ui/popover';
 import { Size } from '@leafygreen-ui/tokens';
 
 export const State = {
@@ -20,15 +19,7 @@ export { Size };
 
 interface BaseSearchInputProps
   extends DarkModeProps,
-    Omit<ComponentPropsWithoutRef<'form'>, 'onChange'>,
-    Pick<
-      PopoverProps,
-      | 'usePortal'
-      | 'portalClassName'
-      | 'portalContainer'
-      | 'portalRef'
-      | 'scrollContainer'
-    > {
+    Omit<ComponentPropsWithoutRef<'form'>, 'onChange'> {
   /**
    * The current state of the SearchInput. This can be none, or loading.
    */
diff --git a/packages/search-input/src/SearchResultsMenu/SearchResultsMenu.tsx b/packages/search-input/src/SearchResultsMenu/SearchResultsMenu.tsx
index e684b4d257..ec034c994d 100644
--- a/packages/search-input/src/SearchResultsMenu/SearchResultsMenu.tsx
+++ b/packages/search-input/src/SearchResultsMenu/SearchResultsMenu.tsx
@@ -4,7 +4,7 @@ import isUndefined from 'lodash/isUndefined';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { useAvailableSpace } from '@leafygreen-ui/hooks';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
-import Popover from '@leafygreen-ui/popover';
+import Popover, { DismissMode, RenderMode } from '@leafygreen-ui/popover';
 import { spacing } from '@leafygreen-ui/tokens';
 
 import { useSearchInputContext } from '../SearchInputContext';
@@ -32,11 +32,6 @@ export const SearchResultsMenu = React.forwardRef<
       children,
       open = false,
       refEl,
-      usePortal = true,
-      portalClassName,
-      portalContainer,
-      portalRef,
-      scrollContainer,
       footerSlot,
       ...rest
     }: SearchResultsMenuProps,
@@ -58,10 +53,9 @@ export const SearchResultsMenu = React.forwardRef<
       : 'unset';
 
     return (
-      // @ts-ignore `portalClassName`, `portalContainer` and `scrollContainer` are only passed in when `usePortal` is true.
       <Popover
         data-testid="lg-search-input-popover"
-        spacing={spacing[2]}
+        spacing={spacing[200]}
         active={open}
         align="bottom"
         justify="start"
@@ -74,11 +68,8 @@ export const SearchResultsMenu = React.forwardRef<
           `,
         )}
         refEl={refEl}
-        usePortal={usePortal}
-        portalClassName={usePortal ? portalClassName : undefined}
-        portalContainer={usePortal ? portalContainer : null}
-        portalRef={portalRef}
-        scrollContainer={usePortal ? scrollContainer : null}
+        dismissMode={DismissMode.Manual}
+        renderMode={RenderMode.TopLayer}
       >
         {state === 'loading' ? (
           <LoadingOption />
diff --git a/packages/search-input/src/SearchResultsMenu/SearchResultsMenu.types.ts b/packages/search-input/src/SearchResultsMenu/SearchResultsMenu.types.ts
index fae8fe953f..3834da23c0 100644
--- a/packages/search-input/src/SearchResultsMenu/SearchResultsMenu.types.ts
+++ b/packages/search-input/src/SearchResultsMenu/SearchResultsMenu.types.ts
@@ -1,11 +1,12 @@
 import React, { ReactElement } from 'react';
 
 import { HTMLElementProps } from '@leafygreen-ui/lib';
-import { PopoverRenderModeProps } from '@leafygreen-ui/popover';
 
-export type SearchResultsMenuProps = HTMLElementProps<'ul', HTMLUListElement> &
-  Omit<PopoverRenderModeProps, 'renderMode'> & {
-    refEl: React.RefObject<HTMLElement>;
-    open?: boolean;
-    footerSlot?: ReactElement;
-  };
+export type SearchResultsMenuProps = HTMLElementProps<
+  'ul',
+  HTMLUListElement
+> & {
+  refEl: React.RefObject<HTMLElement>;
+  open?: boolean;
+  footerSlot?: ReactElement;
+};
diff --git a/packages/select/README.md b/packages/select/README.md
index aa23326af2..8bd4606f79 100644
--- a/packages/select/README.md
+++ b/packages/select/README.md
@@ -44,35 +44,35 @@ import { Option, OptionGroup, Select, Size } from '@leafygreen-ui/select';
 
 ## Select Properties
 
-| Prop                 | Type                                          | Description                                                                                                                                                                                                                                     | Default                             |
-| -------------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | -------------------------------------- | -------- |
-| `children`           | `node`                                        | `<Option />` and `<OptionGroup />` elements.                                                                                                                                                                                                    |                                     |
-| `className`          | `string`                                      | Adds a className to the outermost element.                                                                                                                                                                                                      |                                     |
-| `darkMode`           | `boolean`                                     | Determines whether or not the component will appear in dark mode.                                                                                                                                                                               | `false`                             |
-| `size`               | `'xsmall'`, `'small'`, `'default'`, `'large'` | Sets the size of the component's elements.                                                                                                                                                                                                      | `'default'`                         |
-| `id`                 | `string`                                      | id associated with the Select component.                                                                                                                                                                                                        |                                     |
-| `name`               | `string`                                      | The name that will be used when submitted as part of a form.                                                                                                                                                                                    |                                     |
-| `label`              | `string`                                      | Text shown in bold above the input element.                                                                                                                                                                                                     |                                     |
-| `aria-labelledby`    | `string`                                      | Must be provided if and only if neither `label` nor `aria-label` is not provided.                                                                                                                                                               |
-| `aria-label`         | `string`                                      | Must be provided if and only if neither `label` nor `aria-labelledby` is not provided.                                                                                                                                                          |                                     |
-| `description`        | `React.ReactNode`                             | Text that gives more detail about the requirements for the input.                                                                                                                                                                               |                                     |
-| `placeholder`        | `string`                                      | The placeholder text shown in the input element when an option is not selected.                                                                                                                                                                 | `'Select'`                          |
-| `disabled`           | `boolean`                                     | Disables the component from being edited.                                                                                                                                                                                                       | `false`                             |
-| `value`              | `string`                                      | Sets the `<Option />` that will appear selected and makes the component a controlled component.                                                                                                                                                 | `''`                                |
-| `defaultValue`       | `string`                                      | Sets the `<Option />` that will appear selected on page load when the component is uncontrolled.                                                                                                                                                | `''`                                |
-| `onChange`           | `function`                                    | A function that gets called when the selected value changes. Receives the value string as the first argument.                                                                                                                                   | `() => {}`                          |
-| `readOnly`           | `boolean`                                     | Disables the console warning when the component is controlled and no `onChange` prop is provided.                                                                                                                                               | `false`                             |
-| `allowDeselect`      | `boolean`                                     | Enables or disables the option for a user to select a null default value.                                                                                                                                                                       | `true`                              |
-| `usePortal`          | `boolean`                                     | Determines if Select dropdown will be rendered inside a portal.                                                                                                                                                                                 | `true`                              |
-| `portalContainer`    | `HTMLElement` \| `null`                       | Sets the container used for the popover's portal. NOTE: If using a `scrollContainer` make sure that the `portalContainer` is contained within the `scrollContainer`. E.g, passing the same refrence to `scrollContainer` and `portalContainer`. |                                     |
-| `scrollContainer`    | `HTMLElement` \| `null`                       | If the popover portal has a scrollable ancestor other than the window, this prop allows passing a reference to that lement to allow the portal to position properly.                                                                            |                                     |
-| `portalClassName`    | `string`                                      | Passes the given className to the popover's portal container if the default portal container is being used.                                                                                                                                     |                                     |
-| `popoverZIndex`      | `number`                                      | Sets the z-index CSS property for the popover.                                                                                                                                                                                                  |                                     |
-| `state`              | `'error'`                                     | `'none'`                                                                                                                                                                                                                                        | `'valid'`                           | Determines the state of the `<select>` | `'none'` |
-| `errorMessage`       | `string`                                      | Text that shows when the `state` is set to `error`.                                                                                                                                                                                             | `'This input needs your attention'` |
-| `successMessage`     | `string`                                      | Text that shows when the `state` is set to `valid`.                                                                                                                                                                                             | `'Success'`                         |
-| `baseFontSize`       | `'13'`, `'16'`                                | Determines the base font size if sizeVariant is set to `default`                                                                                                                                                                                | `'13'`                              |
-| `dropdownWidthBasis` | `'option'` \| `'trigger'`                     | Determines the width of the dropdown. `trigger` will make the dropdown width the width of the menu trigger. `option` will make the dropdown width as wide as the widest option.                                                                 | `trigger`                           |
+| Prop                 | Type                                          | Description                                                                                                                                                                                                                                                                                                                                                                           | Default                             |
+| -------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | -------------------------------------- | -------- |
+| `children`           | `node`                                        | `<Option />` and `<OptionGroup />` elements.                                                                                                                                                                                                                                                                                                                                          |                                     |
+| `className`          | `string`                                      | Adds a className to the outermost element.                                                                                                                                                                                                                                                                                                                                            |                                     |
+| `darkMode`           | `boolean`                                     | Determines whether or not the component will appear in dark mode.                                                                                                                                                                                                                                                                                                                     | `false`                             |
+| `size`               | `'xsmall'`, `'small'`, `'default'`, `'large'` | Sets the size of the component's elements.                                                                                                                                                                                                                                                                                                                                            | `'default'`                         |
+| `id`                 | `string`                                      | id associated with the Select component.                                                                                                                                                                                                                                                                                                                                              |                                     |
+| `name`               | `string`                                      | The name that will be used when submitted as part of a form.                                                                                                                                                                                                                                                                                                                          |                                     |
+| `label`              | `string`                                      | Text shown in bold above the input element.                                                                                                                                                                                                                                                                                                                                           |                                     |
+| `aria-labelledby`    | `string`                                      | Must be provided if and only if neither `label` nor `aria-label` is not provided.                                                                                                                                                                                                                                                                                                     |
+| `aria-label`         | `string`                                      | Must be provided if and only if neither `label` nor `aria-labelledby` is not provided.                                                                                                                                                                                                                                                                                                |                                     |
+| `description`        | `React.ReactNode`                             | Text that gives more detail about the requirements for the input.                                                                                                                                                                                                                                                                                                                     |                                     |
+| `placeholder`        | `string`                                      | The placeholder text shown in the input element when an option is not selected.                                                                                                                                                                                                                                                                                                       | `'Select'`                          |
+| `disabled`           | `boolean`                                     | Disables the component from being edited.                                                                                                                                                                                                                                                                                                                                             | `false`                             |
+| `value`              | `string`                                      | Sets the `<Option />` that will appear selected and makes the component a controlled component.                                                                                                                                                                                                                                                                                       | `''`                                |
+| `defaultValue`       | `string`                                      | Sets the `<Option />` that will appear selected on page load when the component is uncontrolled.                                                                                                                                                                                                                                                                                      | `''`                                |
+| `onChange`           | `function`                                    | A function that gets called when the selected value changes. Receives the value string as the first argument.                                                                                                                                                                                                                                                                         | `() => {}`                          |
+| `readOnly`           | `boolean`                                     | Disables the console warning when the component is controlled and no `onChange` prop is provided.                                                                                                                                                                                                                                                                                     | `false`                             |
+| `allowDeselect`      | `boolean`                                     | Enables or disables the option for a user to select a null default value.                                                                                                                                                                                                                                                                                                             | `true`                              |
+| `renderMode`         | `'inline'` \| `'portal'` \| `'top-layer'`     | Options to render the popover element <br> \* [deprecated] `'inline'` will render the popover element inline in the DOM where it's written <br> \* [deprecated] `'portal'` will render the popover element in a new div appended to the body. Alternatively, can be portaled into a provided `portalContainer` <br> \* `'top-layer'` will render the popover element in the top layer | `'top-layer'`                       |
+| `portalContainer`    | `HTMLElement` \| `null`                       | Sets the container used for the popover's portal. NOTE: If using a `scrollContainer` make sure that the `portalContainer` is contained within the `scrollContainer`. E.g, passing the same refrence to `scrollContainer` and `portalContainer`.                                                                                                                                       |                                     |
+| `scrollContainer`    | `HTMLElement` \| `null`                       | If the popover portal has a scrollable ancestor other than the window, this prop allows passing a reference to that lement to allow the portal to position properly.                                                                                                                                                                                                                  |                                     |
+| `portalClassName`    | `string`                                      | Passes the given className to the popover's portal container if the default portal container is being used.                                                                                                                                                                                                                                                                           |                                     |
+| `popoverZIndex`      | `number`                                      | Sets the z-index CSS property for the popover.                                                                                                                                                                                                                                                                                                                                        |                                     |
+| `state`              | `'error'`                                     | `'none'`                                                                                                                                                                                                                                                                                                                                                                              | `'valid'`                           | Determines the state of the `<select>` | `'none'` |
+| `errorMessage`       | `string`                                      | Text that shows when the `state` is set to `error`.                                                                                                                                                                                                                                                                                                                                   | `'This input needs your attention'` |
+| `successMessage`     | `string`                                      | Text that shows when the `state` is set to `valid`.                                                                                                                                                                                                                                                                                                                                   | `'Success'`                         |
+| `baseFontSize`       | `'13'`, `'16'`                                | Determines the base font size if sizeVariant is set to `default`                                                                                                                                                                                                                                                                                                                      | `'13'`                              |
+| `dropdownWidthBasis` | `'option'` \| `'trigger'`                     | Determines the width of the dropdown. `trigger` will make the dropdown width the width of the menu trigger. `option` will make the dropdown width as wide as the widest option.                                                                                                                                                                                                       | `trigger`                           |
 
 # Option
 
diff --git a/packages/select/src/ListMenu/ListMenu.stories.tsx b/packages/select/src/ListMenu/ListMenu.stories.tsx
index b24211cc2d..3e962aa4c6 100644
--- a/packages/select/src/ListMenu/ListMenu.stories.tsx
+++ b/packages/select/src/ListMenu/ListMenu.stories.tsx
@@ -5,6 +5,7 @@ import { StoryMetaType, StoryType } from '@lg-tools/storybook-utils';
 
 import { css } from '@leafygreen-ui/emotion';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+import { DismissMode } from '@leafygreen-ui/popover';
 
 import { InternalOption } from '../Option';
 import { SelectContext } from '../SelectContext';
diff --git a/packages/select/src/ListMenu/ListMenu.tsx b/packages/select/src/ListMenu/ListMenu.tsx
index 666c0b7f15..2779201ae8 100644
--- a/packages/select/src/ListMenu/ListMenu.tsx
+++ b/packages/select/src/ListMenu/ListMenu.tsx
@@ -34,18 +34,6 @@ const ListMenu = React.forwardRef<HTMLUListElement, ListMenuProps>(
       className,
       labelId,
       dropdownWidthBasis,
-      usePortal = true,
-      portalContainer,
-      portalRef,
-      scrollContainer,
-      portalClassName,
-      popoverZIndex,
-      onEntering,
-      onEnter,
-      onEntered,
-      onExiting,
-      onExit,
-      onExited,
     }: ListMenuProps,
     forwardedRef,
   ) {
@@ -69,25 +57,6 @@ const ListMenu = React.forwardRef<HTMLUListElement, ListMenuProps>(
       [ref],
     );
 
-    const popoverProps = {
-      popoverZIndex,
-      onEntering,
-      onEnter,
-      onEntered,
-      onExiting,
-      onExit,
-      onExited,
-      ...(usePortal
-        ? {
-            usePortal,
-            portalClassName,
-            portalContainer,
-            portalRef,
-            scrollContainer,
-          }
-        : { usePortal }),
-    };
-
     return (
       <Popover
         active={open && !disabled}
@@ -99,7 +68,6 @@ const ListMenu = React.forwardRef<HTMLUListElement, ListMenuProps>(
           [autoWidthStyles]: dropdownWidthBasis === DropdownWidthBasis.Option,
         })}
         refEl={referenceElement}
-        {...popoverProps}
       >
         {/* Keyboard events handled in Select component through event listener hook */}
         {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
diff --git a/packages/select/src/ListMenu/ListMenu.types.ts b/packages/select/src/ListMenu/ListMenu.types.ts
index 4c7e09f134..15267ce19d 100644
--- a/packages/select/src/ListMenu/ListMenu.types.ts
+++ b/packages/select/src/ListMenu/ListMenu.types.ts
@@ -1,11 +1,8 @@
 import { HTMLElementProps } from '@leafygreen-ui/lib';
-import { PopoverProps } from '@leafygreen-ui/popover';
 
 import { DropdownWidthBasis } from '../Select/Select.types';
 
-export interface ListMenuProps
-  extends HTMLElementProps<'ul', HTMLLIElement>,
-    Omit<PopoverProps, 'active' | 'refEl' | 'onClick'> {
+export interface ListMenuProps extends HTMLElementProps<'ul', HTMLLIElement> {
   children: React.ReactNode;
   id: string;
   referenceElement: React.MutableRefObject<HTMLElement | null>;
diff --git a/packages/select/src/Select.stories.tsx b/packages/select/src/Select.stories.tsx
index 8b8c5f3606..0249881382 100644
--- a/packages/select/src/Select.stories.tsx
+++ b/packages/select/src/Select.stories.tsx
@@ -9,6 +9,7 @@ import { StoryFn } from '@storybook/react';
 import { css, cx } from '@leafygreen-ui/emotion';
 import BeakerIcon from '@leafygreen-ui/icon/dist/Beaker';
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+import { RenderMode } from '@leafygreen-ui/popover';
 
 import { Option, OptionGroup, Select, type SelectProps, Size, State } from '.';
 
@@ -74,7 +75,7 @@ const meta: StoryMetaType<typeof Select> = {
         Aardvark
       </Option>,
     ],
-    usePortal: true,
+    renderMode: RenderMode.TopLayer,
   },
   argTypes: {
     placeholder: { control: 'text' },
@@ -153,14 +154,4 @@ WithIcons.parameters = {
   },
 };
 
-export const NoPortal = LiveExample.bind({});
-NoPortal.args = {
-  usePortal: false,
-};
-NoPortal.parameters = {
-  chromatic: {
-    disableSnapshot: true,
-  },
-};
-
 export const Generated = () => {};
diff --git a/packages/select/src/Select/Select.spec.tsx b/packages/select/src/Select/Select.spec.tsx
index 6be7d7f5c5..3b9ae58bbb 100644
--- a/packages/select/src/Select/Select.spec.tsx
+++ b/packages/select/src/Select/Select.spec.tsx
@@ -2,7 +2,6 @@ import React, { createRef, useState } from 'react';
 import {
   act,
   fireEvent,
-  getByText as getByTextFor,
   render,
   RenderResult,
   waitFor,
@@ -15,6 +14,7 @@ import BeakerIcon from '@leafygreen-ui/icon/dist/Beaker';
 import * as LeafyGreenProviderModule from '@leafygreen-ui/leafygreen-provider';
 import { PopoverProvider } from '@leafygreen-ui/leafygreen-provider';
 import { keyMap } from '@leafygreen-ui/lib';
+import { RenderMode } from '@leafygreen-ui/popover';
 import { Context, jest as Jest } from '@leafygreen-ui/testing-lib';
 
 import { getTestUtils } from '../utils/getTestUtils/getTestUtils';
@@ -307,6 +307,7 @@ describe('packages/select', () => {
       document.body.appendChild(portalContainer);
       const portalRef = createRef<HTMLElement>();
       const { getInput } = renderSelect({
+        renderMode: RenderMode.Portal,
         portalContainer,
         portalRef,
       });
@@ -696,7 +697,7 @@ describe('packages/select', () => {
 
           await waitForElementToBeRemoved(listbox);
 
-          expect(getByTextFor(button, optionText)).toBeVisible();
+          expect(button).toBeVisible();
           expect(button).toHaveFocus();
           expect(button).toHaveValue(optionValue);
         });
@@ -724,7 +725,7 @@ describe('packages/select', () => {
 
           await waitForElementToBeRemoved(listbox);
 
-          expect(getByTextFor(button, optionText)).toBeVisible();
+          expect(button).toBeVisible();
           expect(button).toHaveFocus();
           expect(button).toHaveValue(optionValue);
         });
@@ -748,7 +749,7 @@ describe('packages/select', () => {
 
           await waitForElementToBeRemoved(listbox);
 
-          expect(getByTextFor(button, optionText)).toBeVisible();
+          expect(button).toBeVisible();
           expect(button).toHaveFocus();
           expect(button).toHaveValue(optionValue);
         });
@@ -778,7 +779,7 @@ describe('packages/select', () => {
           expect(onChangeSpy).not.toHaveBeenCalled();
           expect(listbox).toBeInTheDocument();
 
-          expect(getByTextFor(button, 'Select')).toBeVisible();
+          expect(button).toBeVisible();
           expect(targetOption).toHaveFocus();
 
           expect(button).toHaveValue('');
@@ -799,7 +800,7 @@ describe('packages/select', () => {
           expect(onChangeSpy).not.toHaveBeenCalled();
           expect(listbox).toBeInTheDocument();
 
-          expect(getByTextFor(button, 'Select')).toBeVisible();
+          expect(button).toBeVisible();
           expect(button).toHaveValue('');
         });
       });
@@ -961,160 +962,163 @@ describe('packages/select', () => {
     });
   });
 
-  describe('without Portal (usePortal="false")', () => {
-    test('menu opens', async () => {
-      const { getInput, getPopover } = renderSelect({ usePortal: false });
+  describe.each([RenderMode.Inline, RenderMode.TopLayer])(
+    `when renderMode=%p`,
+    renderMode => {
+      test('menu opens', async () => {
+        const { getInput, getPopover } = renderSelect({ renderMode });
 
-      userEvent.click(getInput());
-      await waitFor(() => expect(getPopover()).toBeVisible());
-    });
-
-    test('menu renders as a child of button', async () => {
-      const { getPopover, getInput } = renderSelect({
-        usePortal: false,
-      });
-
-      userEvent.click(getInput());
-
-      await waitFor(() => {
-        const popover = getPopover();
-        expect(popover).toBeInTheDocument();
-        expect(getInput()).toContainElement(popover);
+        userEvent.click(getInput());
+        await waitFor(() => expect(getPopover()).toBeVisible());
       });
-    });
-
-    describe('fires onChange when selecting an option', () => {
-      test('on mouse click', async () => {
-        const onChange = jest.fn();
 
-        const { getInput, getOptionByValue } = renderSelect({
-          usePortal: false,
-          onChange: onChange,
+      test('menu renders as a child of button', async () => {
+        const { getPopover, getInput } = renderSelect({
+          renderMode,
         });
 
         userEvent.click(getInput());
-        userEvent.click(getOptionByValue('Red')!);
-        expect(onChange).toHaveBeenCalled();
-      });
 
-      test('on enter', async () => {
-        const onChange = jest.fn();
-        const { getInput } = renderSelect({
-          usePortal: false,
-          onChange: onChange,
+        await waitFor(() => {
+          const popover = getPopover();
+          expect(popover).toBeInTheDocument();
+          expect(getInput()).toContainElement(popover);
         });
-
-        const button = getInput();
-        userEvent.type(button, '{arrowdown}');
-        // first option is focused by default
-        userEvent.keyboard('{enter}');
-        expect(onChange).toHaveBeenCalled();
       });
 
-      test('on space', async () => {
-        const onChange = jest.fn();
-        const { getInput } = renderSelect({
-          usePortal: false,
-          onChange: onChange,
-        });
-
-        const button = getInput();
-        userEvent.type(button, '{arrowdown}');
-        // first option is focused by default
-        userEvent.keyboard('{space}');
-        expect(onChange).toHaveBeenCalled();
-      });
-    });
-
-    describe('closing', () => {
-      describe('selecting an option closes menu', () => {
+      describe('fires onChange when selecting an option', () => {
         test('on mouse click', async () => {
-          const { getInput, getPopover, getOptionByValue } = renderSelect({
-            usePortal: false,
+          const onChange = jest.fn();
+
+          const { getInput, getOptionByValue } = renderSelect({
+            renderMode,
+            onChange: onChange,
           });
+
           userEvent.click(getInput());
-          await waitFor(() => {
-            expect(getPopover()).toBeVisible();
-          });
           userEvent.click(getOptionByValue('Red')!);
-          await waitForElementToBeRemoved(getPopover());
-          expect(getPopover()).not.toBeInTheDocument();
+          expect(onChange).toHaveBeenCalled();
         });
 
         test('on enter', async () => {
-          const { getInput, getPopover } = renderSelect({
-            usePortal: false,
+          const onChange = jest.fn();
+          const { getInput } = renderSelect({
+            renderMode,
+            onChange: onChange,
           });
 
           const button = getInput();
           userEvent.type(button, '{arrowdown}');
-          await waitFor(() => {
-            expect(getPopover()).toBeInTheDocument();
-          });
           // first option is focused by default
           userEvent.keyboard('{enter}');
-          await waitForElementToBeRemoved(getPopover());
-          expect(getPopover()).not.toBeInTheDocument();
+          expect(onChange).toHaveBeenCalled();
         });
 
         test('on space', async () => {
-          const { getInput, getPopover } = renderSelect({
-            usePortal: false,
+          const onChange = jest.fn();
+          const { getInput } = renderSelect({
+            renderMode,
+            onChange: onChange,
           });
 
           const button = getInput();
           userEvent.type(button, '{arrowdown}');
-          await waitFor(() => {
-            expect(getPopover()).toBeInTheDocument();
-          });
           // first option is focused by default
           userEvent.keyboard('{space}');
-          await waitForElementToBeRemoved(getPopover());
-          expect(getPopover()).not.toBeInTheDocument();
+          expect(onChange).toHaveBeenCalled();
         });
       });
-    });
 
-    describe('fires Popover callbacks', () => {
-      test('opening the select fires the `onEnter*` callbacks', async () => {
-        const onEnter = jest.fn();
-        const onEntering = jest.fn();
-        const onEntered = jest.fn();
+      describe('closing', () => {
+        describe('selecting an option closes menu', () => {
+          test('on mouse click', async () => {
+            const { getInput, getPopover, getOptionByValue } = renderSelect({
+              renderMode,
+            });
+            userEvent.click(getInput());
+            await waitFor(() => {
+              expect(getPopover()).toBeVisible();
+            });
+            userEvent.click(getOptionByValue('Red')!);
+            await waitForElementToBeRemoved(getPopover());
+            expect(getPopover()).not.toBeInTheDocument();
+          });
 
-        const { getInput } = renderSelect({
-          onEnter: onEnter,
-          onEntering: onEntering,
-          onEntered: onEntered,
-          usePortal: false,
-        });
+          test('on enter', async () => {
+            const { getInput, getPopover } = renderSelect({
+              renderMode,
+            });
+
+            const button = getInput();
+            userEvent.type(button, '{arrowdown}');
+            await waitFor(() => {
+              expect(getPopover()).toBeInTheDocument();
+            });
+            // first option is focused by default
+            userEvent.keyboard('{enter}');
+            await waitForElementToBeRemoved(getPopover());
+            expect(getPopover()).not.toBeInTheDocument();
+          });
 
-        userEvent.click(getInput());
-        expect(onEnter).toHaveBeenCalled();
-        expect(onEntering).toHaveBeenCalled();
-        await waitFor(() => expect(onEntered).toHaveBeenCalled());
+          test('on space', async () => {
+            const { getInput, getPopover } = renderSelect({
+              renderMode,
+            });
+
+            const button = getInput();
+            userEvent.type(button, '{arrowdown}');
+            await waitFor(() => {
+              expect(getPopover()).toBeInTheDocument();
+            });
+            // first option is focused by default
+            userEvent.keyboard('{space}');
+            await waitForElementToBeRemoved(getPopover());
+            expect(getPopover()).not.toBeInTheDocument();
+          });
+        });
       });
 
-      test('closing the select fires the `onExit*` callbacks', async () => {
-        const onExit = jest.fn();
-        const onExiting = jest.fn();
-        const onExited = jest.fn();
+      describe('fires Popover callbacks', () => {
+        test('opening the select fires the `onEnter*` callbacks', async () => {
+          const onEnter = jest.fn();
+          const onEntering = jest.fn();
+          const onEntered = jest.fn();
+
+          const { getInput } = renderSelect({
+            onEnter: onEnter,
+            onEntering: onEntering,
+            onEntered: onEntered,
+            renderMode,
+          });
 
-        const { getInput } = renderSelect({
-          onExit: onExit,
-          onExiting: onExiting,
-          onExited: onExited,
-          usePortal: false,
+          userEvent.click(getInput());
+          expect(onEnter).toHaveBeenCalled();
+          expect(onEntering).toHaveBeenCalled();
+          await waitFor(() => expect(onEntered).toHaveBeenCalled());
         });
 
-        userEvent.click(getInput());
-        userEvent.click(getInput());
+        test('closing the select fires the `onExit*` callbacks', async () => {
+          const onExit = jest.fn();
+          const onExiting = jest.fn();
+          const onExited = jest.fn();
 
-        expect(onExit).toHaveBeenCalled();
-        expect(onExiting).toHaveBeenCalled();
-        await waitFor(() => expect(onExited).toHaveBeenCalled());
+          const { getInput } = renderSelect({
+            onExit: onExit,
+            onExiting: onExiting,
+            onExited: onExited,
+            renderMode,
+          });
+
+          userEvent.click(getInput());
+          userEvent.click(getInput());
+
+          expect(onExit).toHaveBeenCalled();
+          expect(onExiting).toHaveBeenCalled();
+          await waitFor(() => expect(onExited).toHaveBeenCalled());
+        });
       });
-    });
-  });
+    },
+  );
 
   describe('with PopoverContext', () => {
     const mockSetIsPopoverOpen = jest.fn();
@@ -1148,7 +1152,7 @@ describe('packages/select', () => {
       );
     });
 
-    test('calls `setIsPopoverOpen` when `usePortal === false`', async () => {
+    test(`calls setIsPopoverOpen when renderMode="${RenderMode.Inline}"`, async () => {
       jest
         .spyOn(LeafyGreenProviderModule, 'usePopoverContext')
         .mockImplementation(() => ({
@@ -1157,7 +1161,7 @@ describe('packages/select', () => {
         }));
       render(
         <PopoverProvider>
-          <Select {...defaultProps} usePortal={false} />
+          <Select {...defaultProps} renderMode={RenderMode.Inline} />
         </PopoverProvider>,
       );
 
diff --git a/packages/select/src/Select/Select.tsx b/packages/select/src/Select/Select.tsx
index ef36baabb6..59674af780 100644
--- a/packages/select/src/Select/Select.tsx
+++ b/packages/select/src/Select/Select.tsx
@@ -18,9 +18,11 @@ import {
   useViewportSize,
 } from '@leafygreen-ui/hooks';
 import LeafyGreenProvider, {
+  PopoverProvider,
   useDarkMode,
 } from '@leafygreen-ui/leafygreen-provider';
 import { keyMap } from '@leafygreen-ui/lib';
+import { getPopoverRenderModeProps } from '@leafygreen-ui/popover';
 import { BaseFontSize } from '@leafygreen-ui/tokens';
 import { Description, Label } from '@leafygreen-ui/typography';
 
@@ -46,7 +48,14 @@ import {
   largeLabelStyles,
   wrapperStyle,
 } from './Select.styles';
-import { DropdownWidthBasis, SelectProps, Size, State } from './Select.types';
+import {
+  DismissMode,
+  DropdownWidthBasis,
+  RenderMode,
+  SelectProps,
+  Size,
+  State,
+} from './Select.types';
 
 /**
  * Select inputs are typically used alongside other form elements like toggles, radio boxes, or text inputs when a user needs to make a selection from a list of items.
@@ -61,7 +70,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(
       size = Size.Default,
       disabled = false,
       allowDeselect = true,
-      usePortal = true,
+      renderMode = RenderMode.TopLayer,
       placeholder = 'Select',
       errorMessage = DEFAULT_MESSAGES.error,
       successMessage = DEFAULT_MESSAGES.success,
@@ -493,16 +502,15 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(
       onExiting,
       onExit,
       onExited,
-      ...(usePortal
-        ? {
-            usePortal,
-            portalClassName,
-            portalContainer,
-            portalRef,
-            scrollContainer,
-          }
-        : { usePortal }),
-    };
+      ...getPopoverRenderModeProps({
+        dismissMode: DismissMode.Manual,
+        portalClassName,
+        portalContainer,
+        portalRef,
+        renderMode,
+        scrollContainer,
+      }),
+    } as const;
 
     return (
       <LeafyGreenProvider darkMode={darkMode}>
@@ -597,22 +605,24 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(
               baseFontSize={baseFontSize}
               __INTERNAL__menuButtonSlot__={__INTERNAL__menuButtonSlot__}
             >
-              <ListMenu
-                labelId={labelId}
-                id={menuId}
-                referenceElement={menuButtonRef}
-                ref={listMenuRef}
-                className={cx({
-                  [css`
-                    width: ${menuButtonRef.current?.clientWidth}px;
-                  `]: dropdownWidthBasis === DropdownWidthBasis.Trigger,
-                })}
-                dropdownWidthBasis={dropdownWidthBasis}
-                {...popoverProps}
-              >
-                {allowDeselect && deselectionOption}
-                {renderedChildren}
-              </ListMenu>
+              <PopoverProvider {...popoverProps}>
+                <ListMenu
+                  labelId={labelId}
+                  id={menuId}
+                  referenceElement={menuButtonRef}
+                  ref={listMenuRef}
+                  className={cx({
+                    [css`
+                      width: ${menuButtonRef.current?.clientWidth}px;
+                    `]: dropdownWidthBasis === DropdownWidthBasis.Trigger,
+                  })}
+                  dropdownWidthBasis={dropdownWidthBasis}
+                  {...popoverProps}
+                >
+                  {allowDeselect && deselectionOption}
+                  {renderedChildren}
+                </ListMenu>
+              </PopoverProvider>
             </MenuButton>
           </SelectContext.Provider>
           <FormFieldFeedback
@@ -652,6 +662,7 @@ Select.propTypes = {
   allowDeselect: PropTypes.bool,
   baseFontSize: PropTypes.oneOf(Object.values(BaseFontSize)),
   dropdownWidthBasis: PropTypes.oneOf(Object.values(DropdownWidthBasis)),
+  renderMode: PropTypes.oneOf(Object.values(RenderMode)),
   portalRef: PropTypes.shape({
     current:
       typeof window !== 'undefined'
diff --git a/packages/select/src/Select/Select.types.ts b/packages/select/src/Select/Select.types.ts
index 6e4df59df2..78829cb5fe 100644
--- a/packages/select/src/Select/Select.types.ts
+++ b/packages/select/src/Select/Select.types.ts
@@ -8,9 +8,11 @@ import {
   HTMLElementProps,
   LgIdProps,
 } from '@leafygreen-ui/lib';
-import { PopoverProps } from '@leafygreen-ui/popover';
+import { DismissMode, PopoverProps, RenderMode } from '@leafygreen-ui/popover';
 import { BaseFontSize } from '@leafygreen-ui/tokens';
 
+export { DismissMode, RenderMode };
+
 export const Size = {
   XSmall: 'xsmall',
   Small: 'small',
@@ -35,7 +37,7 @@ export interface BaseSelectProps
       HTMLElementProps<'button', HTMLButtonElement>,
       'onChange' | 'onClick'
     >,
-    Omit<PopoverProps, 'active' | 'spacing'>,
+    Omit<PopoverProps, 'active' | 'dismissMode' | 'onToggle' | 'spacing'>,
     DarkModeProps,
     LgIdProps {
   /**
diff --git a/packages/select/src/Select/index.ts b/packages/select/src/Select/index.ts
index 42296fc636..f2239a5e55 100644
--- a/packages/select/src/Select/index.ts
+++ b/packages/select/src/Select/index.ts
@@ -1,6 +1,8 @@
 export { Select } from './Select';
 export {
+  DismissMode,
   DropdownWidthBasis,
+  RenderMode,
   type SelectProps,
   Size,
   State,
diff --git a/packages/select/src/index.ts b/packages/select/src/index.ts
index 6f4aff1ee0..4c5449e986 100644
--- a/packages/select/src/index.ts
+++ b/packages/select/src/index.ts
@@ -4,7 +4,9 @@ export { menuButtonTextClassName } from './MenuButton';
 export { Option } from './Option';
 export { OptionGroup } from './OptionGroup';
 export {
+  DismissMode,
   DropdownWidthBasis,
+  RenderMode,
   Select,
   type SelectProps,
   Size,
diff --git a/packages/select/src/utils/getTestUtils/getTestUtils.spec.tsx b/packages/select/src/utils/getTestUtils/getTestUtils.spec.tsx
index 28a0bef802..d089c054ec 100644
--- a/packages/select/src/utils/getTestUtils/getTestUtils.spec.tsx
+++ b/packages/select/src/utils/getTestUtils/getTestUtils.spec.tsx
@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import { render, waitForElementToBeRemoved } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { RenderMode } from '@leafygreen-ui/popover';
+
 import { Option, OptionGroup, Select, State } from '../../';
 
 import { getTestUtils } from './getTestUtils';
@@ -12,6 +14,8 @@ const defaultProps = {
   description: 'Description',
 } as const;
 
+const renderModes = Object.values(RenderMode);
+
 const children = [
   <Option key="red" value="RED">
     Red
@@ -176,10 +180,10 @@ describe('packages/select/getTestUtils', () => {
     });
 
     describe('getOptions', () => {
-      describe.each([true, false])('usePortal={%p}', boolean => {
+      describe.each(renderModes)('when renderMode={%p}', renderMode => {
         test('returns all options', async () => {
           renderSelect({
-            usePortal: boolean,
+            renderMode,
           });
           const { getInput, getOptions } = getTestUtils();
 
@@ -191,10 +195,10 @@ describe('packages/select/getTestUtils', () => {
     });
 
     describe('getOptionByValue', () => {
-      describe.each([true, false])('usePortal={%p}', boolean => {
+      describe.each(renderModes)('when renderMode={%p}', renderMode => {
         test('is in the document', async () => {
           renderSelect({
-            usePortal: boolean,
+            renderMode,
           });
           const { getInput, getOptionByValue } = getTestUtils();
 
@@ -205,7 +209,7 @@ describe('packages/select/getTestUtils', () => {
 
         test('is not in the document', async () => {
           renderSelect({
-            usePortal: boolean,
+            renderMode,
           });
           const { getInput, getOptionByValue } = getTestUtils();
 
@@ -215,7 +219,7 @@ describe('packages/select/getTestUtils', () => {
 
         test('can be clicked', async () => {
           renderSelect({
-            usePortal: boolean,
+            renderMode,
           });
           const { getInput, getOptionByValue, getInputValue } = getTestUtils();
 
@@ -226,7 +230,7 @@ describe('packages/select/getTestUtils', () => {
 
         test('throws an error if the option does not exist', async () => {
           renderSelect({
-            usePortal: boolean,
+            renderMode,
           });
           const { getInput, getOptionByValue } = getTestUtils();
 
@@ -236,7 +240,7 @@ describe('packages/select/getTestUtils', () => {
 
         test('prevents a click on a disabled option', async () => {
           renderSelect({
-            usePortal: boolean,
+            renderMode,
           });
           const { getInput, getOptionByValue, getPopover, getInputValue } =
             getTestUtils();
@@ -251,11 +255,11 @@ describe('packages/select/getTestUtils', () => {
     });
 
     describe('getPopover', () => {
-      describe.each([true, false])('when usePortal={%p}', boolean => {
+      describe.each(renderModes)('when renderMode={%p}', renderMode => {
         describe('is in the document', () => {
           test('after awaiting waitFor', async () => {
             renderSelect({
-              usePortal: boolean,
+              renderMode,
             });
             const { getInput, getPopover } = getTestUtils();
 
@@ -268,7 +272,7 @@ describe('packages/select/getTestUtils', () => {
         describe('is not in the document ', () => {
           test('after clicking the trigger', async () => {
             renderSelect({
-              usePortal: boolean,
+              renderMode,
             });
             const { getInput, getPopover } = getTestUtils();
 
@@ -281,7 +285,7 @@ describe('packages/select/getTestUtils', () => {
 
           test('after clicking an option', async () => {
             renderSelect({
-              usePortal: boolean,
+              renderMode,
             });
             const { getInput, getPopover, getOptionByValue } = getTestUtils();
 
@@ -340,11 +344,11 @@ describe('packages/select/getTestUtils', () => {
           expect(getInputValue()).toBe('Yellow');
         });
 
-        describe.each([true, false])('when usePortal={%p}', boolean => {
+        describe.each(renderModes)('when renderMode={%p}', renderMode => {
           test('returns the updated value after clicking on an option', async () => {
             renderSelectControlled({
               value: 'Blue',
-              usePortal: boolean,
+              renderMode,
             });
             const { getInput, getInputValue, getOptionByValue } =
               getTestUtils();
@@ -364,11 +368,11 @@ describe('packages/select/getTestUtils', () => {
           expect(getInputValue()).toBe('Green');
         });
 
-        describe.each([true, false])('when usePortal={%p}', boolean => {
+        describe.each(renderModes)('when renderMode={%p}', renderMode => {
           test('returns the updated value after clicking on an option', async () => {
             renderSelect({
               defaultValue: 'Green',
-              usePortal: boolean,
+              renderMode,
             });
             const { getInput, getInputValue, getOptionByValue } =
               getTestUtils();
diff --git a/packages/side-nav/src/CollapseToggle/CollapseToggle.tsx b/packages/side-nav/src/CollapseToggle/CollapseToggle.tsx
index 7e879b3386..ba9135b935 100644
--- a/packages/side-nav/src/CollapseToggle/CollapseToggle.tsx
+++ b/packages/side-nav/src/CollapseToggle/CollapseToggle.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { cx } from '@leafygreen-ui/emotion';
 import ChevronLeft from '@leafygreen-ui/icon/dist/ChevronLeft';
 import ChevronRight from '@leafygreen-ui/icon/dist/ChevronRight';
-import Tooltip from '@leafygreen-ui/tooltip';
+import Tooltip, { Align, Justify, RenderMode } from '@leafygreen-ui/tooltip';
 import { InlineKeyCode } from '@leafygreen-ui/typography';
 
 import { useSideNavContext } from '../SideNav/SideNavContext';
@@ -33,10 +33,10 @@ export function CollapseToggle({
 
   return (
     <Tooltip
-      usePortal={false}
-      align="right"
-      justify="middle"
+      align={Align.Right}
+      justify={Justify.Middle}
       open={typeof hideTooltip === 'boolean' ? !hideTooltip : undefined}
+      renderMode={RenderMode.TopLayer}
       trigger={
         <button
           data-testid="side-nav-collapse-toggle"
diff --git a/packages/split-button/README.md b/packages/split-button/README.md
index a4b1f90b5c..e39cef513f 100644
--- a/packages/split-button/README.md
+++ b/packages/split-button/README.md
@@ -41,20 +41,21 @@ import { MenuItem } from '@leafygreen-ui/menu';
 
 ## Properties
 
-| Prop               | Type                                                | Description                                                                                                                                                                                                                                      | Default     |
-| ------------------ | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
-| `label`            | `string`                                            | The text that will appear inside of the primary button.                                                                                                                                                                                          |             |
-| `darkMode`         | `boolean`                                           | Renders the component with dark mode styles.                                                                                                                                                                                                     | `false`     |
-| `variant`          | `'default'` \| `'primary'` \| `'danger'`            | Sets the variant for both Buttons.                                                                                                                                                                                                               | `'default'` |
-| `size`             | `'xsmall'` \| `'small'` \| `'default'` \| `'large'` | Sets the size for both buttons.                                                                                                                                                                                                                  | `'default'` |
-| `align`            | `'top'` \| `'bottom'`                               | Determines the alignment of the menu relative to the component wrapper.                                                                                                                                                                          | `'bottom'`  |
-| `justify`          | `'start'` \| `'end'`                                | Determines the justification of the menu relative to the component wrapper.                                                                                                                                                                      | `'end'`     |
-| `menuItems`        | `Array<MenuItem>`                                   | The menu items to appear in the menu dropdown. Must be an array of `<MenuItem />`.                                                                                                                                                               |             |
-| `onTriggerClick`   | `React.MouseEventHandler`                           | Callback fired when the trigger is clicked.                                                                                                                                                                                                      |             |
-| `triggerAriaLabel` | `string`                                            | aria-label for the menu trigger button.                                                                                                                                                                                                          |             |
-| `onChange`         | `React.MouseEventHandler`                           | Callback fired when a menuItem is clicked.                                                                                                                                                                                                       |             |
-| `portalContainer`  | `HTMLElement` \| `null`                             | Sets the container used for the popover's portal. NOTE: If using a `scrollContainer` make sure that the `portalContainer` is contained within the `scrollContainer`. E.g, passing the same reference to `scrollContainer` and `portalContainer`. |             |
-| `scrollContainer`  | `HTMLElement` \| `null`                             | If the popover portal has a scrollable ancestor other than the window, this prop allows passing a reference to that element to allow the portal to position properly.                                                                            |             |
-| `portalClassName`  | `string`                                            | Passes the given className to the popover's portal container if the default portal container is being used.                                                                                                                                      |             |
-| `popoverZIndex`    | `number`                                            | Sets the z-index CSS property for the popover.                                                                                                                                                                                                   |             |
-| ...                | `native attributes of component passed to as prop`  | Any other properties will be spread on the root element                                                                                                                                                                                          |             |
+| Prop               | Type                                                | Description                                                                                                                                                                                                                                                                                                                                                                           | Default       |
+| ------------------ | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
+| `label`            | `string`                                            | The text that will appear inside of the primary button.                                                                                                                                                                                                                                                                                                                               |               |
+| `darkMode`         | `boolean`                                           | Renders the component with dark mode styles.                                                                                                                                                                                                                                                                                                                                          | `false`       |
+| `variant`          | `'default'` \| `'primary'` \| `'danger'`            | Sets the variant for both Buttons.                                                                                                                                                                                                                                                                                                                                                    | `'default'`   |
+| `size`             | `'xsmall'` \| `'small'` \| `'default'` \| `'large'` | Sets the size for both buttons.                                                                                                                                                                                                                                                                                                                                                       | `'default'`   |
+| `align`            | `'top'` \| `'bottom'`                               | Determines the alignment of the menu relative to the component wrapper.                                                                                                                                                                                                                                                                                                               | `'bottom'`    |
+| `justify`          | `'start'` \| `'end'`                                | Determines the justification of the menu relative to the component wrapper.                                                                                                                                                                                                                                                                                                           | `'end'`       |
+| `menuItems`        | `Array<MenuItem>`                                   | The menu items to appear in the menu dropdown. Must be an array of `<MenuItem />`.                                                                                                                                                                                                                                                                                                    |               |
+| `onTriggerClick`   | `React.MouseEventHandler`                           | Callback fired when the trigger is clicked.                                                                                                                                                                                                                                                                                                                                           |               |
+| `triggerAriaLabel` | `string`                                            | aria-label for the menu trigger button.                                                                                                                                                                                                                                                                                                                                               |               |
+| `onChange`         | `React.MouseEventHandler`                           | Callback fired when a menuItem is clicked.                                                                                                                                                                                                                                                                                                                                            |               |
+| `renderMode`       | `'inline'` \| `'portal'` \| `'top-layer'`           | Options to render the popover element <br> \* [deprecated] `'inline'` will render the popover element inline in the DOM where it's written <br> \* [deprecated] `'portal'` will render the popover element in a new div appended to the body. Alternatively, can be portaled into a provided `portalContainer` <br> \* `'top-layer'` will render the popover element in the top layer | `'top-layer'` |
+| `portalContainer`  | `HTMLElement` \| `null`                             | Sets the container used for the popover's portal. NOTE: If using a `scrollContainer` make sure that the `portalContainer` is contained within the `scrollContainer`. E.g, passing the same reference to `scrollContainer` and `portalContainer`.                                                                                                                                      |               |
+| `scrollContainer`  | `HTMLElement` \| `null`                             | If the popover portal has a scrollable ancestor other than the window, this prop allows passing a reference to that element to allow the portal to position properly.                                                                                                                                                                                                                 |               |
+| `portalClassName`  | `string`                                            | Passes the given className to the popover's portal container if the default portal container is being used.                                                                                                                                                                                                                                                                           |               |
+| `popoverZIndex`    | `number`                                            | Sets the z-index CSS property for the popover.                                                                                                                                                                                                                                                                                                                                        |               |
+| ...                | `native attributes of component passed to as prop`  | Any other properties will be spread on the root element                                                                                                                                                                                                                                                                                                                               |               |
diff --git a/packages/split-button/src/SplitButton/SplitButton.spec.tsx b/packages/split-button/src/SplitButton/SplitButton.spec.tsx
index 20dae54a5d..eb799875fa 100644
--- a/packages/split-button/src/SplitButton/SplitButton.spec.tsx
+++ b/packages/split-button/src/SplitButton/SplitButton.spec.tsx
@@ -3,6 +3,7 @@ import {
   fireEvent,
   getAllByRole as globalGetAllByRole,
   render,
+  waitFor,
   waitForElementToBeRemoved,
   within,
 } from '@testing-library/react';
@@ -10,6 +11,7 @@ import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
 
 import { MenuItem } from '@leafygreen-ui/menu';
+import { RenderMode } from '@leafygreen-ui/popover';
 
 import { MenuItemsType } from './SplitButton.types';
 import { SplitButton } from '.';
@@ -200,6 +202,7 @@ describe('packages/split-button', () => {
         open,
         portalContainer,
         portalRef,
+        renderMode: RenderMode.Portal,
       });
       expect(portalRef.current).toBeDefined();
       expect(portalRef.current).toBe(portalContainer);
@@ -292,7 +295,7 @@ describe('packages/split-button', () => {
           menuItems,
         });
         const { menuItemElements } = await openMenu();
-        expect(menuItemElements[0]).toHaveFocus();
+        await waitFor(() => expect(menuItemElements[0]).toHaveFocus());
 
         userEvent.type(menuItemElements?.[0]!, `{${key}}`);
         expect(onClick).toHaveBeenCalled();
@@ -325,12 +328,16 @@ describe('packages/split-button', () => {
         test('highlights the next option in the menu', async () => {
           const { openMenu } = renderSplitButton({ menuItems });
           const { menuEl, menuItemElements } = await openMenu();
+          await waitFor(() => expect(menuItemElements[0]).toHaveFocus());
+
           userEvent.type(menuEl!, '{arrowdown}');
           expect(menuItemElements[1]).toHaveFocus();
         });
+
         test('cycles highlight to the top', async () => {
           const { openMenu } = renderSplitButton({ menuItems });
           const { menuEl, menuItemElements } = await openMenu();
+          await waitFor(() => expect(menuItemElements[0]).toHaveFocus());
 
           for (let i = 0; i < menuItemElements.length; i++) {
             userEvent.type(menuEl!, '{arrowdown}');
@@ -344,14 +351,17 @@ describe('packages/split-button', () => {
         test('highlights the previous option in the menu', async () => {
           const { openMenu } = renderSplitButton({ menuItems });
           const { menuEl, menuItemElements } = await openMenu();
+          await waitFor(() => expect(menuItemElements[0]).toHaveFocus());
 
           userEvent.type(menuEl!, '{arrowdown}');
           userEvent.type(menuEl!, '{arrowup}');
           expect(menuItemElements[0]).toHaveFocus();
         });
+
         test('cycles highlight to the bottom', async () => {
           const { openMenu } = renderSplitButton({ menuItems });
           const { menuEl, menuItemElements } = await openMenu();
+          await waitFor(() => expect(menuItemElements[0]).toHaveFocus());
 
           const lastOption = menuItemElements[menuItemElements.length - 1];
           userEvent.type(menuEl!, '{arrowup}');
diff --git a/packages/split-button/src/SplitButton/SplitButton.tsx b/packages/split-button/src/SplitButton/SplitButton.tsx
index b317c9453e..c501a85580 100644
--- a/packages/split-button/src/SplitButton/SplitButton.tsx
+++ b/packages/split-button/src/SplitButton/SplitButton.tsx
@@ -11,6 +11,7 @@ import {
   InferredPolymorphic,
   useInferredPolymorphic,
 } from '@leafygreen-ui/polymorphic';
+import { RenderMode } from '@leafygreen-ui/popover';
 import { BaseFontSize } from '@leafygreen-ui/tokens';
 
 import { Menu } from '../Menu';
@@ -40,7 +41,7 @@ export const SplitButton = InferredPolymorphic<SplitButtonProps, 'button'>(
       maxHeight,
       adjustOnMutation,
       popoverZIndex,
-      usePortal,
+      renderMode = RenderMode.TopLayer,
       portalClassName,
       portalContainer,
       portalRef,
@@ -64,14 +65,14 @@ export const SplitButton = InferredPolymorphic<SplitButtonProps, 'button'>(
     const buttonProps = {
       // only add these props if not an anchor
       ...(!isAnchor && { type }),
-    };
+    } as const;
 
     const sharedButtonProps = {
       variant,
       size,
       baseFontSize,
       disabled,
-    };
+    } as const;
 
     return (
       <div className={cx(buttonContainerStyles, className)} ref={containerRef}>
@@ -92,7 +93,7 @@ export const SplitButton = InferredPolymorphic<SplitButtonProps, 'button'>(
             maxHeight={maxHeight}
             adjustOnMutation={adjustOnMutation}
             popoverZIndex={popoverZIndex}
-            usePortal={usePortal}
+            renderMode={renderMode}
             portalClassName={portalClassName}
             portalContainer={portalContainer}
             portalRef={portalRef}
@@ -149,4 +150,5 @@ SplitButton.propTypes = {
         ? PropTypes.instanceOf(Element)
         : PropTypes.any,
   }),
+  renderMode: PropTypes.oneOf(Object.values(RenderMode)),
 } as any;
diff --git a/packages/stepper/src/EllipsesStep/EllipsesStep.tsx b/packages/stepper/src/EllipsesStep/EllipsesStep.tsx
index d5d0ab6146..d5e297a941 100644
--- a/packages/stepper/src/EllipsesStep/EllipsesStep.tsx
+++ b/packages/stepper/src/EllipsesStep/EllipsesStep.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
-import Tooltip, { Align, Justify } from '@leafygreen-ui/tooltip';
+import Tooltip, { Align, Justify, RenderMode } from '@leafygreen-ui/tooltip';
 
 import { InternalStep } from '../InternalStep';
 
@@ -20,8 +20,9 @@ export const EllipsesStep = ({
   return (
     <Tooltip
       align={Align.Top}
-      justify={Justify.Middle}
       darkMode={darkMode}
+      justify={Justify.Middle}
+      renderMode={RenderMode.TopLayer}
       trigger={
         // The <li> needs to be defined here and not in <Stepper> because the Tooltip doesn't trigger without a wrapping HTML element.
         <li>
diff --git a/packages/tooltip/README.md b/packages/tooltip/README.md
index 772b6c4d02..bca3ab701a 100644
--- a/packages/tooltip/README.md
+++ b/packages/tooltip/README.md
@@ -55,26 +55,26 @@ import Tooltip from '@leafygreen-ui/tooltip';
 
 ## Properties
 
-| Prop              | Type                                     | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Default                                     |
-| ----------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
-| `open`            | `boolean`                                | Controls the component, and determines whether or not the `<Tooltip />` will appear open or closed.                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`                                     |
-| `setOpen`         | `function`                               | If controlling the component, pass state handling function to setOpen prop. This will keep the consuming application's state in-sync with LeafyGreen's state, while the `<Tooltip />` component responds to events such as backdrop clicks and a user pressing the Escape key.                                                                                                                                                                                                                                                                 | `(boolean) => boolean`                      |
-| `initialOpen`     | `boolean`                                | Passes an initial "open" value to an uncontrolled Tooltip.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                                     |
-| `shouldClose`     | `function`                               | Callback that should return a boolean that determines whether or not the `<Tooltip />` should close when a user tries to close it.                                                                                                                                                                                                                                                                                                                                                                                                             | `() => true`                                |
-| `align`           | `'top'`, `'bottom'`, `'left'`, `'right'` | Determines the preferred alignment of the `<Tooltip />` component relative to the element passed to the `trigger` prop. If no `trigger` is passed, the Tooltip will be positioned against its nearest parent element.                                                                                                                                                                                                                                                                                                                          | `'top'`                                     |
-| `justify`         | `'start'`, `'middle'`, `'end'`           | Determines the preferred justification of the `<Tooltip />` component (based on the alignment) relative to the element passed to the `trigger` prop. If no `trigger` is passed, the Tooltip will be positioned against its nearest parent element.                                                                                                                                                                                                                                                                                             | `'start'`                                   |
-| `trigger`         | `function`, `React.ReactNode`            | A `React.ReactNode` against which the `<Tooltip />` will be positioned, and what will be used to trigger the opening and closing of the `Tooltip` component, when the `Tooltip` is uncontrolled. If no `trigger` is passed, the `Tooltip` will be positioned against its nearest parent element. If using a `ReactNode` or inline function, trigger signature is: ({children, ...rest}) => (<button {...rest}>trigger {children}</button>). When using a function, you must pass `children` as an argument in order for the tooltip to render. |                                             |
-| `triggerEvent`    | `'hover'`, `'click'`                     | DOM event that triggers opening/closing of `<Tooltip />` component                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'hover'`                                   |
-| `darkMode`        | `boolean`                                | Determines if the `<Tooltip />` will appear in dark mode.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `false`                                     |
-| `id`              | `string`                                 | `id` applied to `<Tooltip />` component                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |                                             |
-| `className`       | `string`                                 | Applies a className to Tooltip container                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                             |
-| `children`        | `node`                                   | Content that will be rendered inside of `<Tooltip />`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |                                             |
-| `enabled`         | `boolean`                                | Enables Tooltip to trigger based on the event specified by `triggerEvent`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `true`                                      |
-| `onClose`         | `function`                               | Callback that is called when the tooltip is closed internally. E.g. on ESC press, on backdrop click, on blur..                                                                                                                                                                                                                                                                                                                                                                                                                                 | `() => {}`                                  |
-| `usePortal`       | `boolean`                                | Determines if the Tooltip will be rendered within a portal.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `true`                                      |
-| `portalContainer` | `HTMLElement` \| `null`                  | Sets the container used for the popover's portal. NOTE: If using a `scrollContainer` make sure that the `portalContainer` is contained within the `scrollContainer`. E.g, passing the same refrence to `scrollContainer` and `portalContainer`.                                                                                                                                                                                                                                                                                                |                                             |
-| `scrollContainer` | `HTMLElement` \| `null`                  | If the popover portal has a scrollable ancestor other than the window, this prop allows passing a reference to that lement to allow the portal to position properly.                                                                                                                                                                                                                                                                                                                                                                           |                                             |
-| `portalClassName` | `string`                                 | Passes the given className to the popover's portal container if the default portal container is being used.                                                                                                                                                                                                                                                                                                                                                                                                                                    |                                             |
-| `popoverZIndex`   | `number`                                 | Sets the z-index CSS property for the popover.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |                                             |
-| `baseFontSize`    | `13` \| `16`                             | font-size applied to typography element                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | default to value set by LeafyGreen Provider |
-| ...               | native `div` attributes                  | Any other props will be spread on the root `div` element                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                             |
+| Prop              | Type                                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Default                                     |
+| ----------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
+| `open`            | `boolean`                                 | Controls the component, and determines whether or not the `<Tooltip />` will appear open or closed.                                                                                                                                                                                                                                                                                                                                                                                                                                            | `false`                                     |
+| `setOpen`         | `function`                                | If controlling the component, pass state handling function to setOpen prop. This will keep the consuming application's state in-sync with LeafyGreen's state, while the `<Tooltip />` component responds to events such as backdrop clicks and a user pressing the Escape key.                                                                                                                                                                                                                                                                 | `(boolean) => boolean`                      |
+| `initialOpen`     | `boolean`                                 | Passes an initial "open" value to an uncontrolled Tooltip.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                                     |
+| `shouldClose`     | `function`                                | Callback that should return a boolean that determines whether or not the `<Tooltip />` should close when a user tries to close it.                                                                                                                                                                                                                                                                                                                                                                                                             | `() => true`                                |
+| `align`           | `'top'`, `'bottom'`, `'left'`, `'right'`  | Determines the preferred alignment of the `<Tooltip />` component relative to the element passed to the `trigger` prop. If no `trigger` is passed, the Tooltip will be positioned against its nearest parent element.                                                                                                                                                                                                                                                                                                                          | `'top'`                                     |
+| `justify`         | `'start'`, `'middle'`, `'end'`            | Determines the preferred justification of the `<Tooltip />` component (based on the alignment) relative to the element passed to the `trigger` prop. If no `trigger` is passed, the Tooltip will be positioned against its nearest parent element.                                                                                                                                                                                                                                                                                             | `'start'`                                   |
+| `trigger`         | `function`, `React.ReactNode`             | A `React.ReactNode` against which the `<Tooltip />` will be positioned, and what will be used to trigger the opening and closing of the `Tooltip` component, when the `Tooltip` is uncontrolled. If no `trigger` is passed, the `Tooltip` will be positioned against its nearest parent element. If using a `ReactNode` or inline function, trigger signature is: ({children, ...rest}) => (<button {...rest}>trigger {children}</button>). When using a function, you must pass `children` as an argument in order for the tooltip to render. |                                             |
+| `triggerEvent`    | `'hover'`, `'click'`                      | DOM event that triggers opening/closing of `<Tooltip />` component                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | `'hover'`                                   |
+| `darkMode`        | `boolean`                                 | Determines if the `<Tooltip />` will appear in dark mode.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `false`                                     |
+| `id`              | `string`                                  | `id` applied to `<Tooltip />` component                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |                                             |
+| `className`       | `string`                                  | Applies a className to Tooltip container                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                             |
+| `children`        | `node`                                    | Content that will be rendered inside of `<Tooltip />`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |                                             |
+| `enabled`         | `boolean`                                 | Enables Tooltip to trigger based on the event specified by `triggerEvent`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `true`                                      |
+| `onClose`         | `function`                                | Callback that is called when the tooltip is closed internally. E.g. on ESC press, on backdrop click, on blur..                                                                                                                                                                                                                                                                                                                                                                                                                                 | `() => {}`                                  |
+| `renderMode`      | `'inline'` \| `'portal'` \| `'top-layer'` | Options to render the popover element <br> \* [deprecated] `'inline'` will render the popover element inline in the DOM where it's written <br> \* [deprecated] `'portal'` will render the popover element in a new div appended to the body. Alternatively, can be portaled into a provided `portalContainer` <br> \* `'top-layer'` will render the popover element in the top layer                                                                                                                                                          | `'top-layer'`                               |
+| `portalContainer` | `HTMLElement` \| `null`                   | Sets the container used for the popover's portal. NOTE: If using a `scrollContainer` make sure that the `portalContainer` is contained within the `scrollContainer`. E.g, passing the same refrence to `scrollContainer` and `portalContainer`.                                                                                                                                                                                                                                                                                                |                                             |
+| `scrollContainer` | `HTMLElement` \| `null`                   | If the popover portal has a scrollable ancestor other than the window, this prop allows passing a reference to that lement to allow the portal to position properly.                                                                                                                                                                                                                                                                                                                                                                           |                                             |
+| `portalClassName` | `string`                                  | Passes the given className to the popover's portal container if the default portal container is being used.                                                                                                                                                                                                                                                                                                                                                                                                                                    |                                             |
+| `popoverZIndex`   | `number`                                  | Sets the z-index CSS property for the popover.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |                                             |
+| `baseFontSize`    | `13` \| `16`                              | font-size applied to typography element                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | default to value set by LeafyGreen Provider |
+| ...               | native `div` attributes                   | Any other props will be spread on the root `div` element                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |                                             |
diff --git a/packages/tooltip/src/Tooltip.stories.tsx b/packages/tooltip/src/Tooltip.stories.tsx
index 8ed1b3f637..6e38394ac8 100644
--- a/packages/tooltip/src/Tooltip.stories.tsx
+++ b/packages/tooltip/src/Tooltip.stories.tsx
@@ -10,7 +10,7 @@ import { StoryFn } from '@storybook/react';
 import Button, { Size } from '@leafygreen-ui/button';
 import { css } from '@leafygreen-ui/emotion';
 import Icon from '@leafygreen-ui/icon';
-import { TestUtils } from '@leafygreen-ui/popover';
+import { DismissMode, RenderMode, TestUtils } from '@leafygreen-ui/popover';
 import { BaseFontSize, transitionDuration } from '@leafygreen-ui/tokens';
 import { Body, InlineCode, Subtitle } from '@leafygreen-ui/typography';
 
@@ -67,7 +67,7 @@ const meta: StoryMetaType<typeof Tooltip> = {
   },
   args: {
     enabled: true,
-    usePortal: true,
+    renderMode: RenderMode.TopLayer,
     trigger: <Button size={Size.XSmall}>Trigger</Button>,
   },
   argTypes: {
@@ -131,7 +131,7 @@ export const InitialOpen = (args: TooltipProps) => {
 };
 InitialOpen.args = {
   enabled: true,
-  usePortal: true,
+  renderMode: RenderMode.TopLayer,
   trigger: <Button size={Size.XSmall}>Trigger</Button>,
   children: 'I am a tooltip!',
 };
@@ -246,14 +246,11 @@ export const ScrollableContainer = ({
   align,
   ...args
 }: TooltipScrollableProps) => {
-  const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(
-    null,
-  );
   const position = referenceElPositions[refButtonPosition];
 
   return (
     <div className={scrollableStyle}>
-      <div className={scrollableInnerStyle} ref={el => setPortalContainer(el)}>
+      <div className={scrollableInnerStyle}>
         <div className={position}>
           <Tooltip
             trigger={
@@ -261,8 +258,6 @@ export const ScrollableContainer = ({
                 <Icon glyph="Cloud" />
               </span>
             }
-            portalContainer={portalContainer}
-            scrollContainer={portalContainer}
             triggerEvent="click"
             justify={justify}
             align={align}
@@ -282,10 +277,6 @@ ScrollableContainer.parameters = {
   },
 };
 
-ScrollableContainer.args = {
-  usePortal: true,
-};
-
 ScrollableContainer.argTypes = {
   refButtonPosition: {
     options: ['centered', 'top', 'right', 'bottom', 'left'],
@@ -294,7 +285,7 @@ ScrollableContainer.argTypes = {
       'Storybook only prop. Used to change position of the reference button',
     defaultValue: 'centered',
   },
-  usePortal: { control: 'none' },
+  renderMode: { control: 'none' },
   portalClassName: { control: 'none' },
   refEl: { control: 'none' },
   className: { control: 'none' },
@@ -309,12 +300,22 @@ ScrollableContainer.argTypes = {
 };
 
 export const ShortString: StoryFn<typeof Tooltip> = () => <></>;
-ShortString.args = { children: 'I am a tooltip!' };
+ShortString.args = {
+  children: 'I am a tooltip!',
+  dismissMode: DismissMode.Manual,
+  renderMode: RenderMode.TopLayer,
+};
 
 export const LongString: StoryFn<typeof Tooltip> = () => <></>;
-LongString.args = { children: longText };
+LongString.args = {
+  children: longText,
+  dismissMode: DismissMode.Manual,
+  renderMode: RenderMode.TopLayer,
+};
 
 export const JSXChildren: StoryFn<typeof Tooltip> = () => <></>;
 JSXChildren.args = {
   children: <InlineCode>@leafygreen-ui/tooltip</InlineCode>,
+  dismissMode: DismissMode.Manual,
+  renderMode: RenderMode.TopLayer,
 };
diff --git a/packages/tooltip/src/Tooltip/Tooltip.spec.tsx b/packages/tooltip/src/Tooltip/Tooltip.spec.tsx
index 81f500f462..62b5ed0ac6 100644
--- a/packages/tooltip/src/Tooltip/Tooltip.spec.tsx
+++ b/packages/tooltip/src/Tooltip/Tooltip.spec.tsx
@@ -13,6 +13,7 @@ import { axe } from 'jest-axe';
 import Icon from '@leafygreen-ui/icon';
 import CloudIcon from '@leafygreen-ui/icon/dist/Cloud';
 import { HTMLElementProps, OneOf } from '@leafygreen-ui/lib';
+import { RenderMode } from '@leafygreen-ui/popover';
 import { transitionDuration } from '@leafygreen-ui/tokens';
 
 import Tooltip from './Tooltip';
@@ -63,8 +64,8 @@ const triggerTypes = [
 function renderTooltip(
   props: Omit<TooltipProps, 'children' | 'trigger'> &
     OneOf<
-      { usePortal?: true; portalClassName?: string },
-      { usePortal: false }
+      { renderMode?: 'portal'; portalClassName?: string },
+      { renderMode: 'inline' | 'top-layer' }
     > = {},
 ) {
   const utils = render(
@@ -145,15 +146,13 @@ describe('packages/tooltip', () => {
 
       fireEvent.mouseEnter(button);
 
-      await waitFor(() => getByTestId(tooltipTestId), { timeout: 500 });
+      await waitFor(() => getByTestId(tooltipTestId));
 
       expect(getByTestId(tooltipTestId)).toBeInTheDocument();
 
       fireEvent.mouseLeave(button);
 
-      await waitForElementToBeRemoved(getByTestId(tooltipTestId), {
-        timeout: 500,
-      });
+      await waitForElementToBeRemoved(getByTestId(tooltipTestId));
 
       expect(queryByTestId(tooltipTestId)).not.toBeInTheDocument();
     });
@@ -320,12 +319,12 @@ describe('packages/tooltip', () => {
     });
 
     describe('clicking content inside of tooltip does not force tooltip to close', () => {
-      function testCase(name: string, usePortal: boolean): void {
+      function testCase(name: string, renderMode: RenderMode): void {
         test(`${name}`, async () => {
           const { button, getByTestId } = renderTooltip({
             open: true,
             setOpen,
-            usePortal,
+            renderMode,
           });
 
           fireEvent.click(button);
@@ -348,8 +347,9 @@ describe('packages/tooltip', () => {
         });
       }
 
-      testCase('with portal', true);
-      testCase('without portal', false);
+      testCase('render inline', RenderMode.Inline);
+      testCase('render portal', RenderMode.Portal);
+      testCase('render top layer', RenderMode.TopLayer);
     });
   });
 
@@ -516,22 +516,32 @@ describe('packages/tooltip', () => {
       open: true,
       portalContainer,
       portalRef,
+      renderMode: RenderMode.Portal,
     });
     expect(portalRef.current).toBeDefined();
     expect(portalRef.current).toBe(portalContainer);
   });
 
-  test('portals popover content to end of DOM, when "usePortal" is not set', () => {
+  test(`does not portal popover content to end of DOM when renderMode=${RenderMode.Inline}`, () => {
+    const { container } = renderTooltip({
+      open: true,
+      renderMode: RenderMode.Inline,
+    });
+    expect(container.innerHTML.includes(tooltipTestId)).toBeTruthy();
+  });
+
+  test(`portals popover content to end of DOM when renderMode=${RenderMode.Portal}`, () => {
     const { container, getByTestId } = renderTooltip({
       open: true,
+      renderMode: RenderMode.Portal,
     });
     expect(container).not.toContain(getByTestId(tooltipTestId));
   });
 
-  test('does not portal popover content to end of DOM when "usePortal" is false', () => {
+  test(`does not portal popover content to end of DOM when renderMode=${RenderMode.TopLayer}`, () => {
     const { container } = renderTooltip({
       open: true,
-      usePortal: false,
+      renderMode: RenderMode.TopLayer,
     });
 
     expect(container.innerHTML.includes(tooltipTestId)).toBe(true);
@@ -541,6 +551,7 @@ describe('packages/tooltip', () => {
     const { getByTestId } = renderTooltip({
       open: true,
       portalClassName: 'test-classname',
+      renderMode: RenderMode.Portal,
     });
 
     const matchedElements = document.querySelectorAll('body > .test-classname');
@@ -550,16 +561,6 @@ describe('packages/tooltip', () => {
     expect(portalRoot).toContainElement(getByTestId(tooltipTestId));
   });
 
-  // eslint-disable-next-line jest/expect-expect
-  test('does not allow specifying "portalClassName", when "usePortal" is false', () => {
-    renderTooltip({
-      open: true,
-      usePortal: false,
-      // @ts-expect-error
-      portalClassName: 'test-classname',
-    });
-  });
-
   describe('Renders warning when', () => {
     const expectedWarnMsg =
       'Using a LeafyGreenUI Icon or Glyph component as a trigger will not render a Tooltip,' +
diff --git a/packages/tooltip/src/Tooltip/Tooltip.styles.ts b/packages/tooltip/src/Tooltip/Tooltip.styles.ts
index 64011164f2..35c96bb34e 100644
--- a/packages/tooltip/src/Tooltip/Tooltip.styles.ts
+++ b/packages/tooltip/src/Tooltip/Tooltip.styles.ts
@@ -3,11 +3,7 @@ import { transparentize } from 'polished';
 import { css } from '@leafygreen-ui/emotion';
 import { Theme } from '@leafygreen-ui/lib';
 import { palette } from '@leafygreen-ui/palette';
-import {
-  fontFamilies,
-  fontWeights,
-  transitionDuration,
-} from '@leafygreen-ui/tokens';
+import { fontFamilies, fontWeights } from '@leafygreen-ui/tokens';
 
 import { borderRadius, notchWidth } from './tooltipConstants';
 
@@ -65,7 +61,3 @@ export const minSize = notchWidth + 2 * borderRadius;
 export const minHeightStyle = css`
   min-height: ${minSize}px;
 `;
-
-export const transitionDelay = css`
-  transition-delay: ${transitionDuration.slowest}ms;
-`;
diff --git a/packages/tooltip/src/Tooltip/Tooltip.tsx b/packages/tooltip/src/Tooltip/Tooltip.tsx
index fc38d73903..5430f1ca43 100644
--- a/packages/tooltip/src/Tooltip/Tooltip.tsx
+++ b/packages/tooltip/src/Tooltip/Tooltip.tsx
@@ -19,7 +19,7 @@ import { isComponentGlyph } from '@leafygreen-ui/icon';
 import LeafyGreenProvider, {
   useDarkMode,
 } from '@leafygreen-ui/leafygreen-provider';
-import Popover, { Justify } from '@leafygreen-ui/popover';
+import Popover, { getPopoverRenderModeProps } from '@leafygreen-ui/popover';
 import {
   bodyTypeScaleStyles,
   useUpdatedBaseFontSize,
@@ -33,11 +33,13 @@ import {
   colorSet,
   minHeightStyle,
   positionRelative,
-  transitionDelay,
 } from './Tooltip.styles';
 import {
   Align,
+  DismissMode,
+  Justify,
   PopoverFunctionParameters,
+  RenderMode,
   TooltipProps,
   TriggerEvent,
 } from './Tooltip.types';
@@ -72,7 +74,7 @@ const stopClickPropagation = (evt: React.MouseEvent) => {
  * @param props.trigger Trigger element can be ReactNode or function.
  * @param props.triggerEvent Whether the Tooltip should be triggered by a `click` or `hover`.
  * @param props.id id given to Tooltip content.
- * @param props.usePortal Determines whether or not Tooltip will be Portaled
+ * @param props.renderMode Options to render the popover element: `inline`, `portal`, `top-layer`.
  * @param props.portalClassName Classname applied to root element of the portal.
  * @param props.portalRef A ref for the portal element
  * @param props.onClose Callback that is fired when the tooltip is closed.
@@ -88,7 +90,7 @@ function Tooltip({
   align = 'top',
   justify = 'start',
   spacing = 12,
-  usePortal = true,
+  renderMode = RenderMode.TopLayer,
   onClose = () => {},
   id,
   shouldClose,
@@ -111,6 +113,7 @@ function Tooltip({
   const setOpen =
     isControlled && controlledSetOpen ? controlledSetOpen : uncontrolledSetOpen;
 
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
   const tooltipRef = useRef<HTMLDivElement>(null);
 
   const existingId = id ?? tooltipRef.current?.id;
@@ -143,11 +146,17 @@ function Tooltip({
               // Without this the tooltip sometimes opens without a transition. flushSync prevents this state update from automatically batching. Instead updates are made synchronously.
               // https://react.dev/reference/react-dom/flushSync#flushing-updates-for-third-party-integrations
               flushSync(() => {
-                setOpen(true);
+                timeoutRef.current = setTimeout(() => {
+                  setOpen(true);
+                }, 500);
               });
             }, 35),
             onMouseLeave: debounce((e: MouseEvent) => {
               userTriggerHandler('onMouseLeave', e);
+              if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+                timeoutRef.current = null;
+              }
               handleClose();
             }, 35),
             onFocus: (e: MouseEvent) => {
@@ -190,19 +199,18 @@ function Tooltip({
   useBackdropClick(handleClose, [tooltipRef], open && triggerEvent === 'click');
 
   const popoverProps = {
-    refEl,
     popoverZIndex,
-    ...(usePortal
-      ? {
-          spacing,
-          usePortal,
-          portalClassName,
-          portalContainer,
-          portalRef,
-          scrollContainer,
-        }
-      : { spacing, usePortal }),
-  };
+    refEl,
+    spacing,
+    ...getPopoverRenderModeProps({
+      dismissMode: DismissMode.Manual,
+      portalClassName,
+      portalContainer,
+      portalRef,
+      renderMode,
+      scrollContainer,
+    }),
+  } as const;
 
   const active = enabled && open;
   const isLeftOrRightAligned = ['left', 'right'].includes(align);
@@ -215,14 +223,11 @@ function Tooltip({
       justify={justify}
       adjustOnMutation={true}
       onClick={stopClickPropagation}
-      className={cx(
-        transitionDelay,
-        css`
-          // Try to fit all the content on one line (until it hits max-width)
-          // Overrides default behavior, which is to set width to size of the trigger.
-          width: max-content;
-        `,
-      )}
+      className={css`
+        // Try to fit all the content on one line (until it hits max-width)
+        // Overrides default behavior, which is to set width to size of the trigger.
+        width: max-content;
+      `}
       {...popoverProps}
     >
       {({ align, justify, referenceElPos }: PopoverFunctionParameters) => {
@@ -319,7 +324,7 @@ Tooltip.propTypes = {
   setOpen: PropTypes.func,
   id: PropTypes.string,
   shouldClose: PropTypes.func,
-  usePortal: PropTypes.bool,
+  renderMode: PropTypes.oneOf(Object.values(RenderMode)),
   portalClassName: PropTypes.string,
   portalRef: PropTypes.shape({
     current:
diff --git a/packages/tooltip/src/Tooltip/Tooltip.types.ts b/packages/tooltip/src/Tooltip/Tooltip.types.ts
index de0e32adb3..180db65599 100644
--- a/packages/tooltip/src/Tooltip/Tooltip.types.ts
+++ b/packages/tooltip/src/Tooltip/Tooltip.types.ts
@@ -3,9 +3,11 @@ import React from 'react';
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 import {
   Align as PopoverAlign,
+  DismissMode,
   ElementPosition,
   Justify,
   PopoverProps,
+  RenderMode,
 } from '@leafygreen-ui/popover';
 import { BaseFontSize } from '@leafygreen-ui/tokens';
 
@@ -28,7 +30,7 @@ export type Align = Exclude<
   'center-vertical' | 'center-horizontal'
 >;
 
-export { Justify };
+export { DismissMode, Justify, RenderMode };
 
 export interface PopoverFunctionParameters {
   align: PopoverAlign;
@@ -38,7 +40,12 @@ export interface PopoverFunctionParameters {
 
 type ModifiedPopoverProps = Omit<
   PopoverProps,
-  'active' | 'adjustOnMutation' | 'children' | 'align'
+  | 'active'
+  | 'adjustOnMutation'
+  | 'align'
+  | 'children'
+  | 'dismissMode'
+  | 'onToggle'
 >;
 
 export type TooltipProps = Omit<
diff --git a/packages/tooltip/src/Tooltip/index.ts b/packages/tooltip/src/Tooltip/index.ts
index 4031fd3930..b4a97d058e 100644
--- a/packages/tooltip/src/Tooltip/index.ts
+++ b/packages/tooltip/src/Tooltip/index.ts
@@ -1,10 +1,19 @@
 import Tooltip from './Tooltip';
 import {
   Align,
+  DismissMode,
   Justify,
+  RenderMode,
   type TooltipProps,
   TriggerEvent,
 } from './Tooltip.types';
 
-export { Align, Justify, type TooltipProps, TriggerEvent };
+export {
+  Align,
+  DismissMode,
+  Justify,
+  RenderMode,
+  type TooltipProps,
+  TriggerEvent,
+};
 export default Tooltip;
diff --git a/packages/tooltip/src/index.ts b/packages/tooltip/src/index.ts
index 9adfb1b931..9c93197fa8 100644
--- a/packages/tooltip/src/index.ts
+++ b/packages/tooltip/src/index.ts
@@ -1,9 +1,18 @@
 import Tooltip, {
   Align,
+  DismissMode,
   Justify,
+  RenderMode,
   type TooltipProps,
   TriggerEvent,
 } from './Tooltip';
 
-export { Align, Justify, type TooltipProps, TriggerEvent };
+export {
+  Align,
+  DismissMode,
+  Justify,
+  RenderMode,
+  type TooltipProps,
+  TriggerEvent,
+};
 export default Tooltip;