使用react-bootstrap在poptrigger中定位popover

Question

Bootstrap for my project. My JavaScript code is following:

<OverlayTrigger  trigger="click"  placement="right"  overlay={<Popover ><strong>Gender: </strong>Please select your gender</Popover>}>

               <input className="col-sm-1 col-xs-1" type="radio" name="gender" value="Male" checked={this.state.gender ==="Male"} onChange={this.onRequiredGender} disabled={this.state.maleDisable}  />
               </OverlayTrigger>

on click radio button is providing me Popover but position of that Popover is just next to that radio button.

I tried by CSS:

.popover .right{
    left: 400px
}

even using React-bootstrap positionLeft={400}

that was something like following:

<OverlayTrigger  trigger="click"  placement="right"  overlay={<Popover positionLeft={400} ><strong>Gender: </strong>Please select your gender</Popover>}>

                   <input className="col-sm-1 col-xs-1" type="radio" name="gender" value="Male" checked={this.state.gender ==="Male"} onChange={this.onRequiredGender} disabled={this.state.maleDisable}  />
                   </OverlayTrigger>

still position of popover is same as the position of radio button.

If anyone can help me to shift my Popover given position then It will be great.

Thanks in advance..

Answer 1

The thing is positionLeft prop that you are trying to use is overridden by the OverlayTrigger and you should'nt use it. However if you want a finer control over the Popover element I suggest you create your own popover component that does something with the positionLeft and positionTop component that are passed in to it by the Overlay component .

class CustomPopover extends React.Component {
  render(){

    return (
      <ReactBootstrap.Popover {...this.props} positionLeft={400}>
        { this.props.children }
      </ReactBootstrap.Popover>
    )
  }
}

You can use it like

<Overlay>
  <CustomPopover><strong>Gender: </strong>Please select your gender</CustomPopover>
</Overlay>

Here is an issue on github: https://github.com/react-bootstrap/react-bootstrap/issues/816 . Check it out.