Button tooltip triggers the wrong button

[benbucksch]

Environment:

• carbon-components-svelte 0.50.2
• Chrome browser

Reproduction:

• Add buttons <Button kind="ghost" tooltipPosition="right"> in a row: [Add], [Delete], [Save]. They invoke corresponding functions.
• Click [Add] a bunch of times.
• Go with the mouse cursor over the [Delete] button
• Move the mouse cursor to the right, to the [Save] button, and click
• (Use this exact mouse movement)

Actual result:

• The selected item is deleted.

Expected result:

• The selected item is saved.

Importance:

• Data loss (in this case)
• The wrong button is triggered

Implementation:

• This is a regression. Earlier versions of Carbon did not have this bug.
• The browser native tooltip does not have the bug. The bug is caused by Carbon trying to implement its own tooltip, and this tooltip implementation has this bug.
• There are 2 bugs here that in combination cause the problem:
  • Moving the mouse outside of the button should remove the tooltip. Even if the mouse is on the tooltip, but no longer over the actual button, the tooltip should disappear.
  • A click on the tooltip, if outside the button, should not trigger the action. Only a click on the button itself should trigger the action.
• To fix this, both of the above 2 bugs need to be fixed.

[benbucksch]

On this screenshot, the mouse is over the [Save] button, but the tooltip of the [Delete] button is still showing. A click now will trigger [Delete], instead of [Save] where the mouse is.