Tooltip for Icon Button stays visible after button is clicked and mouse moves away

Tooltip for Icon Button stays visible when button is clicked

• carbon-components
• carbon-components-react

Detailed description

When an Icon Button is clicked, the tooltip stays visible even when the mouse is moved away from the button. This happens since the button has focus, but it looks very odd to the user. I would expect for the tooltip to go away once the button is clicked.

What browser are you working in? Chrome / Firefox / IE / Edge

What version of the Carbon Design System are you using? carbon-components-react 7.17.0

What offering/product do you work on? Any pressing ship or release dates we should be aware of? Part of the Cognos Analytics offering with a release of end of October.

Steps to reproduce the issue

This behaviour can be seen in the Carbon sample for the Icon Button https://react.carbondesignsystem.com/?path=/story/button--icon-button

1. Click on the button icon
2. Move your mouse away from the button

BUG: The tooltip is still visible.

[mdupls]

One aspect that isn’t being discussed here and is what makes this truly feel like a bug is:

Position at least two buttons next to each other in such a way that if both of the tooltips are visible at the same time, they overlap with each other. With the current design, this is possible. Click on one button and then hover over the second button. You now have two visible tooltips that overlap.

How do we prevent this situation from happening?

[carmacleod]

Please don’t just add a timeout - it’s a bit more complicated than that. The “persistence” thing is a WCAG 2.1 requirement, which is relatively new (IBM began requiring WCAG 2.1 about a year ago), so it’s not well understood yet.

I believe there is some “interpretation wiggle room”, though, that would make for better UX and still meet the WCAG requirement.

What you can do is:

• when the tooltip is triggered by focus, then it should be dismissed when focus is removed (or if a different tooltip is triggered by hover)
• when the tooltip is triggered by hover, then it should be dismissed when hover is removed (even if the button still has focus)

Here’s the example code for Sarah’s excellent article Tooltips in the time of WCAG 2.1.