---
navigationLabel: Flip
order: 4
---

import { FlipDemo } from '../../../../components/Demos';

# Flip

The `flip` modifier can change the `placement` of a popper when it's scheduled
to overflow a given boundary.

<x-ad />

## Demo

The placement is set to `bottom`, but if that placement does not fit, the
opposite `top` placement will be used.

<FlipDemo />

## Phase

`main`

## Options

```flow
type Options = {
  fallbackPlacements: Array<Placement>, // [oppositePlacement]
  padding: Padding, // 0,
  boundary: Boundary, // "clippingParents"
  rootBoundary: RootBoundary, // "viewport"
  flipVariations: boolean, // true
};
```

### `fallbackPlacements`

If the popper has placement set to `bottom`, but there isn't enough space to
position the popper in that direction, by default, it will change the popper
placement to `top`. As soon as enough space is detected, the placement will be
reverted to the originally defined (or preferred) one.

You can also define fallback placements by providing a list of placements to
try. When no space is available on the preferred placement, the modifier will
test the ones provided in the list, and use the first useful one.

```js
createPopper(reference, popper, {
  placement: 'left',
  modifiers: [
    {
      name: 'flip',
      options: {
        fallbackPlacements: ['top', 'right'],
      },
    },
  ],
});
```

In the above example, the popper will be placed on left if there's enough space,
if not, it will try the top placement, and if the top placement doesn't fit
either, it will try to use the right placement. If even the right placement
doesn't fit, it reverts back to the original placement.

### `padding`

See [`padding` in Detect Overflow](../../utils/detect-overflow/#padding) for
details.

```js
createPopper(reference, popper, {
  modifiers: [
    {
      name: 'flip',
      options: {
        padding: 8,
      },
    },
  ],
});
```

### `boundary`

See [`boundary` in Detect Overflow](../../utils/detect-overflow/#boundary) for
details.

```js
const element = document.querySelector('#parentElement');

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'flip',
      options: {
        boundary: element,
      },
    },
  ],
});
```

### `rootBoundary`

See
[`rootBoundary` in Detect Overflow](../../utils/detect-overflow/#rootboundary)
for details.

```js
createPopper(reference, popper, {
  modifiers: [
    {
      name: 'flip',
      options: {
        rootBoundary: 'document',
      },
    },
  ],
});
```

### `flipVariations`

When using variation placements (e.g. `top-start`), the popper will attempt to
flip the opposite variation if the preferred variation does not fit. This allows
the popper to stay aligned to the edge of the reference element before
`preventOverflow` has a chance to misalign it.

```js
createPopper(reference, popper, {
  modifiers: [
    {
      name: 'flip',
      options: {
        flipVariations: false, // true by default
      },
    },
  ],
});
```

## Data

This modifier has no data.
