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>
)
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'
}
}
}
}}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With