React bootstrap tooltip overlay is not positioned correctly

Description

I have been working with overlays. I had created a simple tooltip using react bootstrap’s Tooltip class. I have created it in such a way that, whenever the mouse hovers over the button, It shows the tooltip and it’s content. But when I take a look at the result, The tooltip is not positioned correctly.

To Reproduce

Steps to reproduce the behavior:

1. Created a tooltip using the Tooltip class
2. Went to the browser to see the result
3. Discovered that the tooltip is positioned incorrectly

Reproducible Example

Sandbox to show the incorrect positioning.

Expected behavior

Expected the tooltip to be positioned next to the button. On the left side of the button

Screenshots

Environment (please complete the following information)

• Operating System: Windows
• Browser, Version: Chrome 81
• React-Bootstrap Version: 1.0.1

Additional context

The same issue occurs with other overlays for me such as popovers.

[thepuzzlemaster]

@Meryldominguez, I just ran into the same problem. In my case, my overlay, was pointing to a React.FC, and I had to change it to be React.forwardRef in order for the overlay to position correctly. But it worked after I made that change.

[Meryldominguez]

Hi! Im actually having this issue, despite spreading the injected props. I am working on a Navbar that re-renders based on the ‘status’ of the ‘event’ namely ‘published’,‘pending’, or ‘draft’

<kbd></kbd>

It seems that if one of the tooltips is triggered when the navbar buttons get re-rendered, I get the placement problem, despite having injected the props.

<kbd></kbd> ^see above with tooltip in far left top corner

Any help on this @jquense?