🐛 Tooltips often stay open when hovered fast

[alexasselin008]

Describe the bug

Steps to reproduce

I've had luck reproducing this issue when hovering fast over a stack of icons

<Stack gap={1} alignY="center" height="200px" overflowY="scroll" paddingTop="50px">
    <TooltipTrigger flexShrink={0}>
        <EmailIcon  flexShrink={0} />
        <Tooltip>Send an email to the orbital space station.</Tooltip>
    </TooltipTrigger>
        <TooltipTrigger>
        <EmailIcon  flexShrink={0} />
        <Tooltip>Send an email to the orbital space station.</Tooltip>
    </TooltipTrigger>
        <TooltipTrigger>
        <EmailIcon  flexShrink={0}/>
        <Tooltip>Send an email to the orbital space station.</Tooltip>
    </TooltipTrigger>
        <TooltipTrigger>
        <EmailIcon  flexShrink={0}/>
        <Tooltip>Send an email to the orbital space station.</Tooltip>
    </TooltipTrigger>
        <TooltipTrigger>
        <EmailIcon  flexShrink={0}/>
        <Tooltip>Send an email to the orbital space station.</Tooltip>
    </TooltipTrigger>
        <TooltipTrigger>
        <EmailIcon flexShrink={0} />
        <Tooltip>Send an email to the orbital space station.</Tooltip>
    </TooltipTrigger>
        <TooltipTrigger>
        <EmailIcon  flexShrink={0}/>
        <Tooltip>Send an email to the orbital space station.</Tooltip>
    </TooltipTrigger>
        <TooltipTrigger>
        <EmailIcon  flexShrink={0}/>
        <Tooltip>Send an email to the orbital space station.</Tooltip>
    </TooltipTrigger>
        <TooltipTrigger>
        <EmailIcon  flexShrink={0}/>
        <Tooltip>Send an email to the orbital space station.</Tooltip>
    </TooltipTrigger>
    
</Stack>

Expected results

[alexasselin008]

Had to revert my initial fix since it broke that possiblity to mouseover a tooltip. During the investigation, i found out what the real problem was.

The dom structure is like this:

<Overlay>
     <Tooltip />
     <OverlayArrow />
</Overlay>

In order to properly display the arrow, we are passing a borderOffset to the overlay, which add a transparent border bottom matching the arrow's height. This ensures that the tooltip is well positionned above the arrow.

When mouseLeave on the trigger occurs, we check if the new element that is mouse hovered is not the overlay. If its not the overlay we close the popup. If it's the overlay, we simply ignore the mouseLeave event, since the tooltip has a way of closing itself on mouseLeave

The error occurs when we mouseLeave the transparent border in the overlay. The trigger doesnt close the popup because the overlay handles it, however its only the Tooltip that has the mouseLeave event, not the overlay. So that 10px window causes the tooltip to stay open

[alexasselin008]

Issue is still present after the latest fix. Will need to investigate directly in Teams Management's codebase

[patricklafrance]

An issue related to virtualization? 😆