<Popper> that references a target inside an overflow:hidden container?

I have poppers that are rendered inside overflow:hidden containers; this causes the poppers to be partially hidden/cropped.

@FezVrasta has indicated that this should be achievable by putting the <Popper> somewhere outside of the overflow:hidden container have it reference the target.

I’m not sure how to do this with react-popper, though. Any ideas/advice?

[FezVrasta]

You have two possibilities:

1. Use something like react-portal to move the popper element somewhere else (usually body):

<Manager>
  <Reference />
  <Portal><Popper /></Portal>
</Manager>

1. Manually define the structure:

<Manager>
  <div style={{ overflow: 'hidden' }}>
    <Reference />
  </div>
  <Popper />
</Manager>

[clintharris]

I found a work-around:

class MyTooltip extends React.Component {
  render() {
    if(!this.props.show) {
      return this.props.children;
    }
    return (
      <Manager>
        <Target>{this.props.children}</Target>
        <Portal isOpened={true}>
          <Popper placement={arrowLocation} className="popper" style={style}>
            Here's the popper's contents...
            <Arrow className="popper__arrow" style={arrowStyle}/>
          </Popper>
        </Portal>
      </Manager>
    );
  }
}

I think I’m just gonna roll with this for now. Thanks for the tip on portal and quick responses!