Tooltips disappearing when clicking different tooltips

[queeniema]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having.

When there are multiple tooltips and one tooltip is open, clicking on another tooltip causes the second tooltip to briefly appear and then disappear.

Is this issue related to a specific component?

Yes, the Tooltip component.

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

I expect the second tooltip to stay open after clicking on it.

What browser are you working in?

Google Chrome Version 86.0.4240.193

What version of the Carbon Design System are you using?

carbon-components: 10.23.2
carbon-components-react: 7.23.2

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

Steps to reproduce the issue

See this sandbox: https://codesandbox.io/s/tooltips-kpcbk?file=/src/index.js

1. Click on the tooltip next to Text input (tooltip with no id) 1. Notice that the tooltip stays visible.
2. Click on the tooltip next to Text input (tooltip with no id) 2. Notice that the tooltip appears for a brief moment and then disappears.

This was discussed in this Slack thread, where it was suggested to add unique id props to each Tooltip. I tried this and it did fix the disappearing tooltip issue (play around with the Text input (tooltip with id) tooltips to see this), but it causes accessibility issues where you can no longer tab between text inputs (from tooltip to text input and so forth). In the case where tooltips do not have id props, tabbing is fine.

[emyarod]

rather than id can you try setting tooltipId instead? https://codesandbox.io/s/tooltips-forked-wmduk

[queeniema]

Using tooltipId still causes tooltips to disappear.