[Proposition 2] Tooltip now closes properly when hovering the overlay without hovering the tooltip

alexasselin008 commented 1 year ago

Summary

Fix for issue https://github.com/gsoft-inc/sg-orbit/issues/1141

Description of the issue

Here is 3 scenario of how the tooltip works before the fix

Scenario 1 (works):

MouseEnter on trigger -> Tooltip shows
MouseLeave on Trigger -> MouseEnter on white background -> Tooltip disappear because of the event handlers on the trigger.

Scenario 2 (works):

MouseEnter on trigger -> Tooltip shows
MouseLeave on trigger -> MouseEnter Overlay -> Trigger's Event handler ignore the mouseLeave because it's on the overlay. and that is allowed
MouseEnter on Tooltip -> Tooltip stays open
MouseLeave Tooltip -> Tooltip closes because of the event handlers on the tooltip

Scenario 3 (the issue):

MouseEnter on trigger -> Tooltip shows
MouseLeave on Trigger -> MouseEnter on Overlay -> Trigger's Event handler ignore the mouseLeave because it's on the overlay. and that is allowed
MouseLeave Overlay -> MouseEnter on white background -> since the mouse never went in the tooltip, the popup stays open because nobody listen to overlay mouseLeave. The bug is here

What I did

Instead of adding spacing in the overlay and that the overlay adds an arrow, I've move spacing/arrow logic in the tooltip and the popover. This allows better control over how to position and handle the arrow

netlify[bot] commented 1 year ago

Deploy Preview for sg-orbit ready!

Name	Link
Latest commit	9350d9c65e6c7cceb14ce3675b8815da9b4c84d9
Latest deploy log	https://app.netlify.com/sites/sg-orbit/deploys/63f4e4835399730008ac8613
Deploy Preview	https://deploy-preview-1152--sg-orbit.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify[bot] commented 1 year ago

Deploy Preview for sg-storybook ready!

Name	Link
Latest commit	9350d9c65e6c7cceb14ce3675b8815da9b4c84d9
Latest deploy log	https://app.netlify.com/sites/sg-storybook/deploys/63f4e483f1ab240008342e52
Deploy Preview	https://deploy-preview-1152--sg-storybook.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

alexasselin008 commented 1 year ago

We won't go this way for now, so i'm closing the PR

gsoft-inc / sg-orbit