Tooltips appear inconsistently on Chrome and Safari

[afercia]

Can't reproduce this with Firefox, seems it happens only in Chrome and Safari. Haven't tested Edge and IE11 on Windows.

When hovering buttons, sometimes the tooltips don't appear as expected. For example, hovering the "Info" button in the top bar makes the tooltip "Content Structure:" appear:

After that, depending on where the mouse pointer is moved, the tooltips of other buttons don't appear. To reproduce in Chrome or Safari:

• hover the "Info" button
• the tooltip appears
• move the mouse pointer horizontally to the "Plus" button on the left, making sure the mouse pointer stays within the area highlighted below while moving:

• once on the "Plus" button, its tooltip doesn't appear (works with Firefox)
• repeat the steps above but this time move the mouse pointer outside the highlighted area before hovering the other button
• the tooltip appears correctly

When the Undo or Redo buttons are enabled, the behavior is slightly different but still not 100% correct (repeat the steps above multiple times and at some point, it will fail).

Wild guess: events propagating to some wrapper element?

[afercia]

Ok so this has to do with the issue mentioned in the inline comment in the tooltip component: facebook/react#4251

Chrome and Safari don't fire the mouseleave event on disabled buttons. Not sure if React uses internally mouseleave or mouseout but it doesn't work regardless. For the four buttons in the screenshot above, when Undo and Redo are disabled, tooltips can't work correctly.

However, this is also partially related to the implementation: there's a delay for the isOver state and these four buttons have no space between them. Spacing them helps (I've tried adding some margin for testing purposes) but it wouldn't be a proper solution.

Some exploration for a different approach would be very welcome.

[karmatosed]

There are some inconsistency reports worth combining into this from here: #11180

[afercia]

Needs to be retested: as far as I know, these buttons are not really disabled now.

[afercia]

Since these buttons no longer use disabled and use instead aria-disabled, the mouseleave event now works as expected. Tested in Chrome / Safari, the tooltips appear consistently.

An unintended, welcomed, consequence of #11379 and other changes to the other buttons. And one more reason to use aria-disabled + noop where it makes sense. /Cc @aduth