Carbon: TooltipDefinition is not shown properly

[Amir-61]

CSS issue for TooltipDefinition component.

TooltipDefinition goes underneath of other components:

<TooltipDefinition
   align='start'
   direction='bottom'
   tooltipText={name}
>

[emyarod]

can you create a reduced test case in Code Sandbox for easier testing and debugging?

[Donisius]

It seems to be caused by the table container, removing it causes the tooltip to be fully displayed. I believe wrapping the table within a div or an element with a display: block property causes the tooltip to appear behind the wrapping parent. Changing the z-index appears to have no effect

[joshblack]

Most likely a parent container has overflow: hidden which would be my guess! 😄

[Donisius]

Removing the overflow-x: auto from .bx--data-table-container seems to "fix" it

[joshblack]

Yeah, definitely is a tricky problem unfortunately 😞 In this case the overflow is for horizontal scroll if I remember correctly. I believe this is a limitation within CSS and it is unlikely that we could do much to resolve it. If you have any ideas let us know!

Going to close this out for now but am happy to re-open if there is something we can to do help address this!