search

twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
https://getbootstrap.com
MIT License
170.25k stars 78.78k forks source link

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

Open prietveld opened 2 years ago

prietveld commented 2 years ago

Prerequisites

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 commented 2 years ago

Screenshots: image image

EdwinFajardoBarrera commented 2 years ago

I would like to contribute to this issue

ffoodd commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

zaosoula commented 2 years ago

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

hanneswylaers commented 2 years ago

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 commented 2 years ago

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