# Popper

- Page: https://jiguang132.com/resources/material-ui/docs/popper
- Resource: Material UI (https://jiguang132.com/resources/material-ui.md)
- All guides: https://jiguang132.com/resources/material-ui/docs.md

Position non-modal content against an element or virtual anchor.

This guide covers Material UI Core with the default Emotion engine; extensions and additional demos are explicitly classified.

## Use case and business boundary

Popper handles positioning, not dismiss, focus trapping or outside-click policy; virtual anchors must reflect real geometry.

## Native composition and scope

`Popper`

Preserve native Material UI composition and types; do not substitute JGuang UI/Base UI/Radix APIs. Example entries are not extra components.

## Native installation and initialization

```bash
npm install @mui/material@9.4.0 @emotion/react@11.14.0 @emotion/styled@11.14.1
```

Use native npm and Emotion, not an invented JGuang UI Registry URL. Place examples inside native ThemeProvider; choose CssBaseline or ScopedCssBaseline for the project. Inspect React, existing providers, lockfile and SSR first. Never overwrite files or conceal peer conflicts. This batch verified React 19.2.8; React 18 and below require matching react-is. See the included bilingual setup guide.

## Practical native parameters

These selected parameters are not a flattened universal API. Preserve the native declaring owner, slot structure, nullable values and generics.

| Owner.prop | Practical role | Declaration source |
| --- | --- | --- |
| `Popper.open` | Controlled native visibility; it does not fetch data or execute actions. | `Popper` |
| `Popper.anchorEl` | Actual or supported virtual anchor; preserve the owning type and lifetime. | `Popper` |
| `Popper.placement` | Native Tooltip/Popper positioning enum, not arbitrary CSS positioning. | `Popper` |
| `Popper.modifiers` | Native Popper modifier configuration; retain real positioning-engine types. | `Popper` |

## Runnable native examples

Machine keys select example entries, not universal variant props. Native demo JSX/data stay unchanged; JGuang-authored acceptance fixtures are explicitly labelled.

- Basic Popper · `SimplePopper` · upstream native demo
- Transitions · `TransitionsPopper` · upstream native demo
- Positioned popper · `PositionedPopper` · upstream native demo
- Virtual element · `VirtualElementPopper` · upstream native demo

## Explicitly unsupported additional examples

These remain in the upstream inventory, not silently skipped or presented as working previews. Additional dependency/framework acceptance is required.

- Transitions · `SpringPopper`: `@react-spring/web`
- Scroll playground · `ScrollPlayground`: `@mui/internal-core-docs/HighlightedCode`
- material-ui-popup-state · `PopperPopupState`: `material-ui-popup-state`

## Actual usage example

Unmodified pinned native demo; copy its required local helper files together.

```tsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Popper from '@mui/material/Popper';

export default function SimplePopper() {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);

  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(anchorEl ? null : event.currentTarget);
  };

  const open = Boolean(anchorEl);
  const id = open ? 'simple-popper' : undefined;

  return (
    <div>
      <button aria-describedby={id} type="button" onClick={handleClick}>
        Toggle Popper
      </button>
      <Popper id={id} open={open} anchorEl={anchorEl}>
        <Box sx={{ border: 1, p: 1, bgcolor: 'background.paper' }}>
          The content of the Popper.
        </Box>
      </Popper>
    </div>
  );
}

```

## Example dependency boundaries

`react`, `@mui/material/Box`, `@mui/material/Popper`, `@mui/material/Fade`, `@mui/material/Typography`, `@mui/material/Stack`, `@mui/material/Button`, `@mui/material/Paper`

Direct Icons/System/Utils example imports require their matching 9.4.0 packages. Relative data/helpers are part of the example closure, not extra components. Remote images and simulated operations do not supply a backend.

## Pinned upstream API metadata reference

These tables retain the upstream metadata, not a newly inferred generic type system. Conditional generics, inherited props and callback details are defined by the source declarations below. Theme defaults may override metadata defaults.

### Popper

```tsx
import Popper from '@mui/material/Popper';
import { Popper } from '@mui/material';
```

| Prop | Required | Upstream metadata type / constraint | Metadata default |
| --- | --- | --- | --- |
| `open` | yes | `bool` | — |
| `anchorEl` | no | `HTML element \| object \| func` | — |
| `children` | no | `node \| func` | — |
| `component` | no | `elementType` | — |
| `container` | no | `HTML element \| func` | — |
| `disablePortal` | no | `bool` | `false` |
| `keepMounted` | no | `bool` | `false` |
| `modifiers` | no | `Array<{ data?: object, effect?: func, enabled?: bool, fn?: func, name?: any, options?: object, phase?: 'afterMain' \| 'afterRead' \| 'afterWrite' \| 'beforeMain' \| 'beforeRead' \| 'beforeWrite' \| 'main' \| 'read' \| 'write', requires?: Array<string>, requiresIfExists?: Array<string> }>` | — |
| `placement` | no | `'auto-end' \| 'auto-start' \| 'auto' \| 'bottom-end' \| 'bottom-start' \| 'bottom' \| 'left-end' \| 'left-start' \| 'left' \| 'right-end' \| 'right-start' \| 'right' \| 'top-end' \| 'top-start' \| 'top'` | `'bottom'` |
| `popperOptions` | no | `{ modifiers?: array, onFirstUpdate?: func, placement?: 'auto-end' \| 'auto-start' \| 'auto' \| 'bottom-end' \| 'bottom-start' \| 'bottom' \| 'left-end' \| 'left-start' \| 'left' \| 'right-end' \| 'right-start' \| 'right' \| 'top-end' \| 'top-start' \| 'top', strategy?: 'absolute' \| 'fixed' }` | `{}` |
| `popperRef` | no | `ref` | — |
| `slotProps` | no | `{ root?: func \| object }` | `{}` |
| `slots` | no | `{ root?: elementType }` | `{}` |
| `sx` | no | `Array<func \| object \| bool> \| func \| object` | — |
| `transition` | no | `bool` | `false` |


## Native source declarations

Declarations/imports are extracted from pinned source without flattening unions or external inheritance. Original English comments/types are source reference, not a claim of translated upstream prose. Shared types stay in their native packages.

### vendor/src/Popper/Popper.tsx

```ts
import { SxProps } from '@mui/system';

import { useRtl } from '@mui/system/RtlProvider';

import refType from '@mui/utils/refType';

import HTMLElementType from '@mui/utils/HTMLElementType';

import PropTypes from 'prop-types';

import * as React from 'react';

import BasePopper from './BasePopper';

import { PopperProps as BasePopperProps } from './BasePopper.types';

import { Theme } from '../styles';

import { styled } from '../zero-styled';

import { useDefaultProps } from '../DefaultPropsProvider';

export interface PopperProps extends Omit<BasePopperProps, 'direction'> {
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component?: React.ElementType | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}
```

## Post-install acceptance

Run strict types, production build and real interactions. Check keyboard labels/focus, disabled/error/read-only semantics where natively supported, both themes, narrow screens and reduced motion. Verify callbacks against the real host data; do not declare installation complete from copying a prompt. Initialization fixtures also require server HTML and warning-free hydration.

## Source and license

https://github.com/mui/material-ui/tree/809a7717b4c050ba3f69b75300689f07c050a16e

MIT · @mui/material@9.4.0. Vendor originals and license are preserved. Full original upstream prose remains in vendor/docs and is not represented as fully translated.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt