Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Popovers appearing behind other content #2858

Open
Licen-it opened this issue Apr 17, 2024 · 2 comments
Open

Popovers appearing behind other content #2858

Licen-it opened this issue Apr 17, 2024 · 2 comments

Comments

@Licen-it
Copy link
Contributor

Licen-it commented Apr 17, 2024

Detailed description

Describe in detail the issue you're having.

Since the tooltips are now living under the same hood of their trigger, if up the line any node is defining a z-index property, the z-index: 6000; set by the tooltip is irrelevant since it will be 6000 within the parent z-index level. This is causing, in certain situations, the tooltip (or any popover) to appear behind other content (i'm using [autoAlign]="true").
In v4 this wasn't happening since the tooltip was placed inside the placeholder or appended to the body which would solve the z-index issue.
The screenshot below shows the effect of another similar problem: position: sticky
The tooltip trigger is inside an element with position: sticky and the element below has the same property (all the cells in that columns have that property). This is making the tooltip position: absolute to appear behind the following position: sticky the same way it would happen if there was a z-index

Is this a feature request (new component, new icon), a bug, or a general issue?

bug

Is this issue related to a specific component?

Any popover

What did you expect to happen? What happened instead? What would you like to see changed?

The popover should ignore the parent z-index and appear over other elements in the page

What browser are you working in?

any

What version of the Carbon Design System are you using?

latest

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Zelta

Steps to reproduce the issue

  1. Create a tooltip
  2. place it in a container with z-index: -1;
  3. sorround the container with other elements
  4. trigger the tooltip

Screenshot

image

@Akshat55
Copy link
Contributor

Ideally, popover should be rendered at the end of the body, but in v11 this was changed for accessibility reasons :/

I'm assuming in next release, they may opt for native popovers.

@Licen-it
Copy link
Contributor Author

@Akshat55 it could be good, but it would still require a fallback for older browsers as checking compatibility table, only newer versions are supporting it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants