Skip to content
+

Popper

The Popper component lets you create tooltips and popovers that display information about an element on the page.

Introduction

The Popper is a utility component for creating various kinds of popups. It relies on the third-party library (Popper.js v2) for positioning.

Component

import { Popper } from '@mui/base/Popper';

By default, the Popper is mounted to the DOM when its open prop is set to true, and removed from the DOM when open is false.

anchorEl is passed as the reference object to create a new Popper.js instance. The children are placed in a Portal prepended to the body of the document to avoid rendering problems. You can disable this behavior with disablePortal prop.

The following demo shows how to create and style a basic Popper. Click Toggle Popper to see how it behaves:

Press Enter to start editing

Customization

Placement

The Popper's default placement is bottom. You can change it using the placement prop. Try changing this value to top in the interactive demo below to see how it works:

Placement value:
Anchor

Transitions

You can animate the open and close states of the Popper with a render prop child and a transition component, as long as the component meets these conditions:

  • Is a direct child descendant of the Popper
  • Calls the onEnter callback prop when the enter transition starts
  • Calls the onExited callback prop when the exit transition is completed

These two callbacks allow the Popper to unmount the child content when closed and fully transitioned.