Carbon: Tooltip is not showing text when in modal

Created on 31 Jul 2020  ·  7Comments  ·  Source: carbon-design-system/carbon

Tooltip is not showing text when in modal

What package(s) are you using?

  • [x] carbon-components
  • [x] carbon-components-react

Detailed description

Describe in detail the issue you're having.

When I'm using a tooltip in a modal, I noticed that the text does not show when I click on the tooltip icon as shown below:

Screen Shot 2020-07-31 at 4 45 14 PM

Tooltip shows up fine though when it's not in a modal. I'm thinking that it's possibly a z-index issue.

Is this issue related to a specific component?

Tooltip

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

Tooltip text should show when being clicked in modal.

What browser are you working in?

Google Chrome

What version of the Carbon Design System are you using?

"carbon-components": "10.16.0",
"carbon-components-react": "7.16.0",

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

IBM Cloud Catalog

needs triage 🕵️‍♀️ waiting for maintainer response 💬 bug 🐛

All 7 comments

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

Hi. I created a similar scenario here with a sandbox: https://3he8m.csb.app/
Try clicking on the tooltip. The text does not show. Let me know if you need anymore information.

when I move your code sandbox example into storybook the issue does not appear, so I think this definitely is a z-index issue although I am still looking into why the example appears different in the storybook vs code sandbox environment. (but a quick temporary workaround in the meantime would be to increase the z-index value of the tooltip)

Hi. Yea that's what I'm doing for now as a temporary workaround.

Tested running this in our local storybook and also working as expected. Not sure why CodeSandbox is having a problem, but going to close this as resolved.

Hi. It's not only CodeSandbox that is having this problem. Our app that uses this component also has this issue. Can we reopen this issue?

We have a workaround for now (increasing the z-index value) for the tooltip but would like a permanent solution.

Was this page helpful?
0 / 5 - 0 ratings