You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
Create a tooltip
place it in a container with z-index: -1;
sorround the container with other elements
trigger the tooltip
Screenshot
The text was updated successfully, but these errors were encountered:
@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
Detailed description
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, thez-index: 6000;
set by the tooltip is irrelevant since it will be 6000 within the parentz-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 tooltipposition: absolute
to appear behind the followingposition: sticky
the same way it would happen if there was az-index
bug
Any popover
The popover should ignore the parent
z-index
and appear over other elements in the pageany
latest
Zelta
Steps to reproduce the issue
z-index: -1;
Screenshot
The text was updated successfully, but these errors were encountered: