When a tooltip is visible and you start scrolling, the tooltip appears above other elements.

[hanneswylaers]

Prerequisites

• I am using the correct version of React-Bootstrap for my version of Bootstrap
• I have searched for duplicate or closed issues
• I have read the contributing guidelines

Describe the bug

When a tooltip appears within a container and you start scrolling the container away, the tooltip appears above any other elements on the page.

Expected behavior

When a tooltip appears within a container and you start scrolling the container, the tooltip should only be visible within the container and not appear above any other elements on the page.

To Reproduce

1: Go to https://react-bootstrap.github.io/components/overlays/#examples
2: Go to example of 'You can pass the Overlay injected props directly to the Tooltip component.' and click on the button to show the tooltip.
3: Start scrolling the entire page.
4: When you scroll the button with the tooltip away, the tooltip appears above the header

Reproducible Example

The issue is visible on the website, see https://react-bootstrap.github.io/components/overlays/#examples.

Screenshots

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

What version of React-Bootstrap are you using?

The issue is visible on the website

What version of Bootstrap are you using?

The issue is visible on the website

Additional context

If I apply 'z-index: 0;' to '.tooltip', the issue seems to be fixed.

[golota60]

Hi! According to bootstrap styling it is expected to work like that. tooltip class applies z-index: 1080 by default. You can change this by adjusting $zindex-tooltip scss variable
https://getbootstrap.com/docs/5.1/components/tooltips/

[watinha]

Hello everyone! In this case, would it make sense to increase the z-index of the header of the docs webpage, so that the tooltips do not hover it?

[hanneswylaers]

@kyletsang FYI: increasing the z-index of the header isn't really solving this issue.
Instead, it introduces other unwanted side effects e.g. when opening a modal, the modal appears under the header.
See the examples on https://react-bootstrap.github.io/components/modal/.

Since I see similar issues at bootstrap side, I guess this issue isn't coming from react-bootstrap.
I left a comment on a similar issue on the bootstrap repo, see twbs/bootstrap#35202 (comment)

[kyletsang]

Forgot about the modal being affected by this. I'll revert the change on the docs.