@floating-ui/core

New Features

• flip: fallbackAxisSideDirection option

  This option adds the ability to compute placements on the opposite axis of the preferred placement without needing to use an explicit fallbackPlacements list, meaning you no longer need to manage a custom map of fallbackPlacements and instead use this option to leverage automatic computing of the array.

  This option determines whether to allow fallback to the opposite axis if no placements along the preferred placement axis fit, and if so, which side direction along that axis to choose. If necessary, it will fallback to the other direction.

  • 'none' signals that no fallback to the opposite axis should take place. (default)

  • 'start' represents 'top' or 'left'.

  • 'end' represents 'bottom' or 'right'.

  ---

  Note:
  In RTL writing direction, the x-axis directions are reversed.

  For instance, by default, if the initial placement is set to 'right', then the placements to try (in order) are:

  ['right', 'left']

  On a narrow viewport, it's possible or even likely that neither of these will fit.

  By specifying a string other than 'none', you allow placements along the opposite axis of the initial placement to be tried. The direction determines which side of placement is tried first:

  flip({
    fallbackAxisSideDirection: 'start',
  });

  The above results in: ['right', 'left', 'top', 'bottom'].

  flip({
    fallbackAxisSideDirection: 'end',
  });

  The above results in: ['right', 'left', 'bottom', 'top'].

  As an example, if you'd like a tooltip that has a placement of 'right' to be placed on top on mobile (assuming it doesn't fit), then you'd use 'start'. For an interactive popover, you likely want to use 'end' so it's placed on the bottom, closer to the user's fingers.

Combining with shift

If shift() is in use in the middleware array, you may desire to disable crossAxis overflow checking, which will allow shift() to perform its work without falling back to the opposite axis (therefore preserving the original axis as best as possible):

const middleware = [
  flip({
    fallbackAxisSideDirection: 'start',
    crossAxis: false,
  }),
  shift(),
];

This will depend on the desired positioning you want to achieve, e.g. if the placement has an explicit alignment specified or not.