react-bootstrap tooltip is not hiding on scroll

We have an issue in a grid/table when we are scrolling (because of more data) tooltip is not hiding / still appearing. When we are doing mouseover in a place where tooltip is required it is working fine but without moving mouseover pointer if we are scrolling grid tooltip is not hiding it is moving along with the scroll.

I tried to re-produce the issue:

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

Tooltip on top

Tooltip on bottom

Tooltip on right

body {
  margin: 100px;
  width: 2000px;
  overflow: auto;
}

$('[data-toggle="tooltip"]').tooltip({
trigger : 'hover'
})    

https://jsfiddle.net/n5du2c39/

Let me know how can we hide on-grid scroll.