Updating the position on window resize.

[SamvelRaja]

It will be better to adjust the position based on the based on window resize event.

[jquense]

adjust the position of what?

[SamvelRaja]

Right now i am using the overlays to position my tooltips, which are not adjusting by themselves when the window size gets resized.

[saltycrane]

@jquense here is an animated gif showing what I think @SamvelRaja is talking about:

@SamvelRaja probably noticed this since he created #55, but #42 is useful for solving this issue. It allows me to do:

class HelpWidget extends Component {
  componentDidMount() {
    util.throttleEvent('resize', 'throttledResize');
    window.addEventListener('throttledResize', this._onResize);
  }
  _onResize = () => {
    this.forceUpdate();
  };
  render() {
    return (
      <span>
        <OverlayTrigger shouldUpdatePosition={true} trigger="click" rootClose placement="bottom" overlay={ <MyPopover /> } >
          <a tabIndex="0" role="button" className="popover-help-trigger"></a>
        </OverlayTrigger>
      </span>
    );
  }
}

Without #42 I need to use a hack to make it work:

class HelpWidget extends Component {
  state = {
    placement: "bottom"
  };
  componentDidMount() {
    util.throttleEvent('resize', 'throttledResize');
    window.addEventListener('throttledResize', this._onResize);
  }
  _onResize = () => {
    // HACK: to make open popover move when resizing the window
    this.setState({placement: 'right'});
    this.setState({placement: 'bottom'});
  };
  render() {
    return (
      <span>
        <OverlayTrigger trigger="click" rootClose placement={this.state.placement} overlay={ <MyPopover /> } >
          <a tabIndex="0" role="button" className="popover-help-trigger"></a>
        </OverlayTrigger>
      </span>
    );
  }
}

[SamvelRaja]

Exactly @saltycrane and toggling the state creating a flick which is not good a approach as well 😞

[jquense]

Hey folks, thanks for the responses

I am inclined to say that the right way to deal with this is to make use of the container prop to "attach" the tooltip to an element that moves with the flow of the document. (notice this example: http://react-bootstrap.github.io/components.html#popovers-in-container)

The downside to doing resize is the performance cost, which matters with lots of tooltips on screen

ref: twbs/bootstrap#9517

[taion]

You'd need both that and listening to the resize event, right?

[jquense]

I suppose it depends on the situation, but yeah, maybe this is something we turn on with shouldPositionUpdate?

[taion]

I feel like attaching a window resize listener automatically is a little janky though.

Maybe offer some utility component for this functionality?

[saltycrane]

Thanks for the responses. I'm still struggling with getting the positioning right, but I think using the container prop solves my window resizing problem. I did not know about that prop. Thanks.

[SamvelRaja]

Thanks all.. It really helps a lot. Go ahead and close the issue if you needs to.