Tooltip doesn't stay anchored to element when scrolling

[joeflack4]

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>
    );
  }
}

[jquense]

Tooltips and Popover are positioned absolutely,. so they' remain relative to their scrollParent, Overlay assumes that's the window but if your app has a different scrollParent, you sohuld set it via the container prop. See here for an example: https://react-bootstrap.github.io/components/popovers/#popovers-positioned-scrolling

I should note that the latest version of react-bootstrap is still for v3 of bootstrap and so doesn't use Popper.js

[jmajcan]

@jquense this example is a broken link. Do you have another link for a proper example?

[gsteja2307]

why is this closed ?

[hoangnm]

I think it's the same issue from the Popper js library that react-bootstrap is using. Reference: floating-ui/floating-ui#52. From the documentation of Popper, https://popper.js.org/docs/v2/modifiers/hide/, I applied this CSS to hide the tooltip:

.tooltip[data-popper-reference-hidden="true"] {
  visibility: hidden;
  pointer-events: none;
}

[michaelpginn]

Is there any update on this?

[kyletsang]

It should be noted that the original post here references reactstrap, which is a different library.

If you have an issue with react-bootstrap, please open a new issue and include a reproducible example on CodeSandbox.

[krnjn]

FWIW – I was able to fix this by simply adding position: relative to the body tag in our application. The hint was taken from this S/O answer (but seems the magically have worked across our app with limited other impacts): https://stackoverflow.com/a/22606657/895641

[tarunjain3]

adding this line on top of html file worked for me

reference: https://stackoverflow.com/questions/71996629/bootstrap-5-tooltip-placement-top-issue-when-page-has-a-scrol