๐ Tooltips often stay open when hovered fast
Closed this issue ยท 3 comments
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
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
Issue is still present after the latest fix. Will need to investigate directly in Teams Management's codebase
An issue related to virtualization? ๐