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

[MarcelPoirier]

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.

[tw15egan]

Since the button retains focus when clicked, it makes sense that the tooltip would stay visible until another element is focused.

I think this needs to be tagged as an enhancement, with the possibility of adding some sort of timeout option to the tooltip.

[emyarod]

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

this behavior comes from accessibility requirements (ref #1667 (comment))

[MarcelPoirier]

I understand the accessibility requirement for showing the tooltip on hover or when the user moves focus to the button. however, having the tooltip stay visible after activating the button seems like a bug to me. I've never seen that in any other product and is a little confusing to the user.

[tw15egan]

Unless another element gains focus after an action is taken on the button, the focus remains on the button. Do you have any user research we could take a look at so that we can take a deeper look into this pattern and the confusion it is causing your users? I think adding some sort of timeout would be a welcome enhancement if you are interested in contributing to this feature.

[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.

[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?

[mdupls]

This current implementation feels like a misinterpretation of the standard.

Persistent
The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.

This is not saying that when clicking on a button, focus should be applied in the same way that focusing via the keyboard does. I should be able to click a button, have the tooltip appear, and then have the tooltip disappear after hover is removed. When I focus with the keyboard, the tooltip should be persisted until focus is moved elsewhere.

The article mentioned by @carmacleod says it best:

Combining pointer and keyboard events should not create multiple tooltips or other buggy behavior.

Note also how the example code behaves differently if you're using the keyboard versus if you're using the mouse. In this example you don't get the buggy behaviour I mentioned above.

[carmacleod]

You now have two visible tooltips that overlap.

Yes, definitely don't let this happen.

I should be able to click a button, have the tooltip appear, and then have the tooltip disappear after hover is removed. When I focus with the keyboard, the tooltip should be persisted until focus is moved elsewhere.

Agreed.

[mdupls]

@tw15egan can this be reconsidered? I see it's an enhancement, but based on the above discussion, it should be considered a bug.

[carmacleod]

Agreed. This is a bug (not an enhancement). See also #4560.

[TheAspens]

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.

I agree that this is a bug that needs to be fixed. We are experiencing this exact issue with pagination. If there are any work around I would be very interested to know how people resolve it.

[martijn-cloudnatix]

I'm currently using this in the onChange event to remove the tooltip when you click the next/previous page. Works pretty good.

const focusButton = document.querySelector('button:focus') as HTMLElement;
if (focusButton) {
  focusButton.blur();
}