Flip

Theflip modifier can change theplacement of a popper when it's scheduledto overflow a given boundary.

Demo

The placement is set tobottom, but if that placement does not fit, theoppositetop placement will be used.

Phase

main

Options

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

fallbackPlacements

If the popper has placement set tobottom, but there isn't enough space toposition the popper in that direction, by default, it will change the popperplacement totop. As soon as enough space is detected, the placement will bereverted to the originally defined (or preferred) one.

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

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 fiteither, it will try to use the right placement. If even the right placementdoesn't fit, it reverts back to the original placement.

padding

Seepadding in Detect Overflow fordetails.

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

boundary

Seeboundary in Detect Overflow fordetails.

const element= document.querySelector('#parentElement');createPopper(reference, popper,{  modifiers:[{      name:'flip',      options:{        boundary: element,},},],});

rootBoundary

SeerootBoundary in Detect Overflowfor details.

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

altBoundary

This will check the reference's boundary context(clippingParents) instead of thepopper's, effectively replicating thescrollParent boundary fromPopper v1. SeealtBoundary in Detect Overflow fordetails.

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

flipVariations

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

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

allowedAutoPlacements

Theauto placement is very versatile, but sometimes you may need to make itresolve to just a user defined set of placements.
If, for example, you wantauto to only ever resolve to eithertop orbottom, you can setallowedAutoPlacements to['top', 'bottom'].

This feature is available starting from@popperjs/core@2.3.0

createPopper(reference, popper,{  placement:'auto',  modifiers:[{      name:'flip',      options:{        allowedAutoPlacements:['top','bottom'],// by default, all the placements are allowed},},],});

Data

This modifier has no data.