Pagination tooltips appear instantly

[Moortiii]

Pagination Tooltips appear instantly [usability issue]:

There are tooltips that appear on hover for the buttons used to change pages in the Pagination component. The tooltips display "Next page" and "Previous page" respectively. These tooltips appear nearly instantly, i.e. just casually moving the cursor across them.

We are observing an issue where users move the cursor from the row below in order to click on batch-action buttons. The tooltips remain open as long as they are hovered and the buttons to click are present behind the tooltip. As a result, users have to move their cursor away to dismiss the tooltip, then move it back to the same position before they can click on the action.

Please see attached screenshots.

Environment

Operating system

Debian 10

Browser

Firefox ESR

Detailed description

What version of the Carbon Design System are you using?

7.26.0

What did you expect to happen?

I expect there to be a brief delay between hovering the button for "Next page" and "Previous page" before the tooltip appears.

What happened instead?

The tooltip appears instantly and the cursor must be deliberately moved away in order for the user to press the button it covers.

Additional information

This is the state before we move the mouse across the button.

This is the state after the "hover".

As you can see, the "Cancel" button is hidden almost completely from the user by the tooltip. There should be a slight delay to prevent the user from triggering the tooltip when they simply drag the cursor quickly over the button.

[vpicone]

Hey @Moortiii thanks for opening this! Having the tooltip obstruct adjacent interactions isn't ideal, it was added for a specific accessibility requirement. We're researching this more at the moment and will get back to you when we've done so.

[tay1orjones]

We're considering formally adding a delay to tooltips in the next major version of Carbon, #9464

In the meantime, you can apply custom styling to override these tooltips behavior by using the CSS animation-delay Property.

Also it's not an explicit requirement, but the general intent and recommended placement for Pagination with DataTables is placement at the bottom of the table as shown in the guidance. This is why the tooltipDirection within Pagination is non-configurable and set to top for both buttons.

carbon/packages/react/src/components/Pagination/Pagination.js

Line 380 in 90b2b8c

tooltipPosition="top"