Tooltip doesn't stay anchored to element when scrolling

Issue Description

Tooltip doesn’t stay anchored to element when scrolling. Another way of phrasing it is that tooltip position doesn’t change relative to the window, even when scrolling.

Expected Behavior

If I scroll, tooltip should stay anchored to the element it first appeared on. If scrolling so much that the element significantly disappears from view, tooltip should naturally disappear with it.

Actual Behavior

Tooltip remains in a fixed position relative to the window.

When tooltip first appears:

Tooltips position when scrolling:

What I’ve tried

• Playing with styles such as “will-change” and “position” directly in Chrome devtools.
• Looking at the reactstrap tooltip documentation to see if there were any props that I could change which might help.
• Tried passing a prop from the Popper API positionFixed={false}, but it doesn’t appear to be recognized by reactstrap:

index.js:2178 Warning: Received `false` for a non-boolean attribute `positionfixed`.

If you want to write it to the DOM, pass a string instead: positionfixed="false" or positionfixed={value.toString()}.

If you used to conditionally omit it with positionfixed={condition && value}, pass positionfixed={condition ? value : undefined} instead.
    in div (created by Tooltip)
    in div (created by Popper)
    in Popper

Anything else that might help

Some source code:

import React, { Component } from 'react';
import { Button, UncontrolledTooltip } from 'reactstrap';
import { error } from '../../styles'

export class ButtonPrimary extends Component {
  constructor(props) {
    super(props);
    this.continue = this.continue.bind(this);
    this.state = {
      tooltipOpen: false,
      tooltipMessage: this.props.constraintMessage,
      continueOk: this.props.continueOk
    };
  }
  
  continue() {
    if (!this.state.continueOk)
      this.setState({tooltipOpen: true})
  }
  
  render() {
    return (
      <React.Fragment>
        <Button style={this.props.style} color={'danger'} id='continue-button' onClick={(e) => {this.continue(e)}}>{this.props.children}</Button>
        <UncontrolledTooltip
          style={{paddingTop: '10px',
            paddingBottom: '10px',
            color: error,
            fontWeight: 'bold'}}
          placement={'bottom'}
          isOpen={this.state.tooltipOpen}
          target='continue-button'>
          {this.state.tooltipMessage}
        </UncontrolledTooltip>
      </React.Fragment>
    );
  }
}