[Tooltip] remains open when focus moves to other elements on the page

[kevinsperrine]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having.

If you have multiple tooltips on a page and you tab through them all tooltips will stay open after they've lost focus. Often, they overlap blocking one another.

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?

I would expect the tooltip to close when it no longer has focus.

What browser are you working in?

Chrome 92.0.4515.131

What version of the Carbon Design System are you using?

10.41.0/7.41.0

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

Steps to reproduce the issue

Minimal repo sandbox

Additional information

• Notes

Also tracking in the iot repo here: carbon-design-system/carbon-addons-iot-react#2437

[andreancardona]

@kevinsperrine Hello!

Thank you for opening up this issue. I can't seem to reproduce the issue. Let me know if I'm not following your directions properly. Thanks! Happy to keep looking into it.

Screen.Recording.2021-08-23.at.2.48.14.PM.mov

[kevinsperrine]

@andreancardona You're clicking the tooltip in your video. This issue is about tab-navigating to them for a11y purposes. If you click once in the example window and then press the tab button once to change focus to the first tooltip and then hit tab again to change focus to the second tooltip both will stay open.

[andreancardona]

@kevinsperrine so sorry I misunderstood the tabbing I'll look into it :)

[kevinsperrine]

Thanks, @andreancardona!