Offset

Theoffset modifier lets you displace a popper element from its referenceelement.

This can be useful if you need to apply some margin between them or if you needto fine tune the position according to some custom logic.

Demo

Skidding

[20, 0]: The popper is offset 20px along the reference.

Distance

[0, 20]: The popper is offset 20px away from the reference.

Phase

main

Options

type Options={  offset: OffsetsFunction|[?number,?number],// [0, 0]};typeOffsetsFunction=({  popper: Rect,  reference: Rect,  placement: Placement,})=>[?number,?number];

offset

The basicoffset accepts an array with two numbers in the form[skidding, distance].

createPopper(reference, popper,{  modifiers:[{      name:'offset',      options:{        offset:[10,20],},},],});

Skidding

The first number,skidding, displaces the popper along the reference element.

           POP |----------| <- [10, 0]REF

Distance

The second number,distance, displaces the popper away from, or toward, thereference element in the direction of its placement. A positive number displacesit further away, while a negative number lets it overlap the reference.

POP | | <- [0, 10] |REF

The option can also take a function provided with some arguments, giving youaccess to the popperplacement, and the reference and popper rects.

createPopper(reference, popper,{  modifiers:[{      name:'offset',      options:{offset:({ placement, reference, popper})=>{if(placement==='bottom'){return[0, popper.height/2];}else{return[];}},},},],});

In the above example, we are applying half the popper's height as margin betweenthe two elements only when the popper is positioned below its reference element.