V5: Tooltip remains visible on top of modal in Chrome for Android

[prietveld]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

When an element with a tooltip opens a modal, the tooltip remains visible on top of the modal, even though it should have been hidden by the browser focus moving to the modal element.

The behavior can be observed in the Pen below, in Chrome for Android, or in device emulation mode (touch enabled) on Chrome and Edge for Windows 10.

Reduced test cases

https://codepen.io/PatrickKennisnet/pen/KKvdeLw

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

Android

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

Chrome

What version of Bootstrap are you using?

5.1.1

[prietveld]

Screenshots:

[EdwinFajardoBarrera]

I would like to contribute to this issue

[ffoodd]

To clarify your test case, you're using the tooltip to show something on hover and would like it to be hidden behind the modal?

If so, @GeoSot wouldn't it be a CSS thing related to competitive z-indexes? I can't search for now but this is what it looks like.

[prietveld]

I would expect the behavior to be the same on mobile / touch as it is on desktop / mouse, which would be the tooltip closing as the modal opens (I assume the desirable behaviour in most use cases). Currently however, the tooltip stays open on mobile / touch, probably due to hover staying on the trigger element even though the modal appeared underneath the cursor.

[zaosoula]

Here the tooltip has a z-index of 1080 while the modal has 1055

[zaosoula]

https://codepen.io/zaosoula/pen/oNGaqLm?editors=1111

[hanneswylaers]

I see similar behaviour when you have a tooltip in a overflow area.
See following codepen for an example: https://codepen.io/hwy/pen/MWrYPej.

How to reproduce?
1: Hover over button
2: The tooltip appears
3: Start scrolling while tooltip is visible
4: Tooltip remains visible when the overflow area appears under/above the subsection & nav

Expected behaviour
On scroll, the tooltip should stay in the overflow area.
They should not be visible when the overflow area scrolls over/under subsections/headers.

Sidenote 1
This was working as expected in Bootstrap 4.4 https://getbootstrap.com/docs/4.4/components/tooltips/

Sidenote 2
The examples on https://popper.js.org/ does seems to have the expected behaviour
https://codesandbox.io/s/github/popperjs/website/tree/master/examples/flipping

Sidenote 3
I initiallly logged this issue on the react-bootstrap repo. To solve it, the z-index of the header got increased. Imo, since it introduces other unwanted side effects, this isn't solving the issue.

[anuragsarma33]

I am also facing this issue.
The tooltip doesn't get disappear while scrolling.