React-bootstrap: `arrowOffsetTop` and `arrowOffsetLeft` props not being passed down when used with Overlay and OverlayTrigger?

[jefffriesen]

I am trying to position the arrow at the top left of a popover component (that is positioned to the right of a target). I think arrowOffsetTop is the right prop to pass in. I see from the source code that it just sets the 'top' css inline style, so something like '10%' or '10px' should work. When I add the prop nothing happens. The inspector shows it's always set to 50% in my code.

I can recreate this with the editable documentation:

        <Overlay
          arrowOffsetTop='90%'
          show={this.state.show}
          target={()=> React.findDOMNode(this.state.target)}
          placement="right"
          container={this}
        >
          <Popover title="Popover bottom">
            <strong>Holy guacamole!</strong> Check this info.
          </Popover>
        </Overlay>

(notice the inspector it's set to 22% and the arrowOffsetTop is set to 90%)

This may happen just with <Overlay/> and <OverlayTrigger/>. In the docs and my code arrowOffsetTop works when used directly with <Popover>.

Any suggestions?

[jefffriesen]

I am using the latest 0.28.2

[jquense]

arrowOffsetTop is a prop that is injected by the Position component (used internally by overlay) you can't adjust it externally from the Overlay or OverlayTrigger. If you need to make an adjustment to the offsets you need to create your own Popover component that intercepts those calculated offsets and adjusts them appropriately. Such as:

let MyPopover = (props) => {
  return <Popover {...props} arrowOffsetTop={props.arrowOffsetTop + 10)/>
}

[jefffriesen]

That works, thanks!