flip

flip() changes the placement of the floating element to the opposite one by default in order to keep it in view.

It also has the ability to flip to any placement, not just the opposite one.

Usage

import {computePosition, flip} from '@floating-ui/dom';
 
computePosition(referenceEl, floatingEl, {
  middleware: [flip()],
});

This cannot be used with autoPlacement().

Options

These are the options you can pass to flip().

interface Options extends DetectOverflowOptions {
  mainAxis?: boolean;
  crossAxis?: boolean;
  fallbackPlacements?: Array<Placement>;
  fallbackStrategy?: 'bestFit' | 'initialPlacement';
  flipAlignment?: boolean;
}

mainAxis

default: true

This is the main axis in which overflow is checked to perform a flip.

• y-axis for 'top' and 'bottom' placements
• x-axis for 'left' and 'right' placements

flip({mainAxis: false});

crossAxis

default: true

This is the cross axis in which overflow is checked to perform a flip, the opposite axis of mainAxis.

flip({crossAxis: false});

fallbackPlacements

default: [oppositePlacement]

This describes the array of placements to try if the preferred placement doesn't fully fit on the axes in which overflow is checked (both by default).

flip({
  fallbackPlacements: ['right', 'bottom'],
});

If the placement in computePosition() is set to 'top', but that doesn't fit, then 'right' will be used instead. If 'right' also doesn't fit, then 'bottom' will be used. If none of these fit, then the best-fitting placement will be used.

fallbackStrategy

default: 'bestFit'

When no placements fit, then you'll want to decide what happens. 'bestFit' will use the placement which fits best on the checked axes. 'initialPlacement' will use the initial placement specified.

flip({
  fallbackStrategy: 'initialPlacement',
});

flipAlignment

default: true

When an alignment is specified, e.g. 'top-start' instead of just 'top', this will flip to 'top-end' if start doesn't fit.

flip({flipAlignment: false});

When using this with the shift() middleware, ensure flip() is placed before shift() in your middleware array. This ensures the flipAlignment logic can act before shift's does.

...detectOverflowOptions

All of detectOverflow's options can be passed. For instance:

flip({padding: 5}); // 0 by default