Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Popper. How to move element relatively parent?

I'm trying to move Popper that is inside parent component. How i can do it?

I tried to use offset property in modifiers object. e.g.:

offset: {
  offset: 20,
}

But offset only move Popper in one direction. If placement={'top' || 'bottom'} => it moves right and left, if placement={'right' || 'left'} => it moves top and bottom.

const Layer = ({
  children,
  align,
  inner = true,
  parent,
  portal,
}) => (
  <Manager>
    <Popper
      placement={align}
      modifiers={{
        inner: {
          enabled: inner,
        },
      }}
      referenceElement={parent}
    >
      {({ ref, style, placement }) => (
        <div
          ref={ref}
          data-placement={placement}
          style={style}
        >
          {console.log(style)}
          {children}
        </div>
      )}
    </Popper>
  </Manager>
)
like image 749
Andrey Osiyuk Avatar asked Feb 27 '26 23:02

Andrey Osiyuk


1 Answers

Just dealt with this: Place MaterialUI Tooltip "on top" of anchor element? (React)

PopperProps={{
  popperOptions: {
    modifiers: {
      flip: { enabled: false },
      offset: {
        enabled: true,
        offset: '20px 20px'
      }
    }
  }
}}
like image 51
doublejosh Avatar answered Mar 02 '26 13:03

doublejosh



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!