Floating Options

Options to control tooltip and beacon positioning via @floating-ui/react-dom.

FieldTypeDefault

autoUpdate

Options passed to autoUpdate (ancestorScroll, elementResize, etc).

Partial<AutoUpdateOptions>--

beaconOptions

Beacon positioning config.

{offset?: number}{offset: -18}

flipOptions

Options for flip middleware. false to disable.

Partial<FlipOptions> | false--

hideArrow

Hide the tooltip arrow. Center placement already hides it.

booleanfalse

middleware

Additional middleware appended to defaults (offset, flip/autoPlacement, shift, arrow).

Array<Middleware>--

onPosition

Called after each position calculation.

(data: PositionData) => void--

shiftOptions

Options for shift middleware.

Partial<ShiftOptions>--

strategy

Positioning strategy. Defaults to fixed when step.isFixed is true.

'absolute' | 'fixed'absolute

Example

import { size } from '@floating-ui/react-dom';
 
floatingOptions={{
  strategy: 'fixed',
  middleware: [
    size({ padding: 10 }),
  ],
  beaconOptions: {
    offset: -10,
  },
}}

The default middleware stack includes offset, flip (or autoPlacement for auto placement), shift, and arrow. Any middleware you pass via floatingOptions.middleware is appended to these defaults.

Beacon Positioning

Beacon placement can be customized independently:

<Joyride
  steps={steps}
  floatingOptions={{
    beaconOptions: {
      offset: -10,       // Distance from target (default: -18)
    },
  }}
/>

For detailed configuration options, see the Floating UI middleware documentation.