<Tooltip> Component Hover Broken

[ObliviousHarmony]

Description

With the latest version of Gutenberg enabled the tooltip on one of our custom blocks does not function as expected. While the tooltip does appear when you hover, once you move the mouse at all, the tooltip vanishes.

Step-by-step reproduction instructions

1. Hover over tooltip wrapped component
2. Wait for it to appear
3. Move mouse

Screenshots, screen recording, code snippet

Video

Screen.Recording.2024-07-08.at.11.38.13.mov

Component

<Tooltip text={ description } placement="top">
	<Button
		className="wc-blocks-product-collection__collection-button"
		onClick={ onClick }
	>
		<div className="wc-blocks-product-collection__collection-button-icon">
			<Icon icon={ icon as Icon.IconType< BlockIcon > } />
		</div>
		<p className="wc-blocks-product-collection__collection-button-title">
			{ title }
		</p>
	</Button>
</Tooltip>

Environment info

• WordPress: 6.5.4
• Gutenberg: 18.7.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[mirka]

This does not reproduce in isolated environments (Tooltip Storybook, StackBlitz with Placeholder), but I do see it happening in other core block placeholders (e.g. Group block) in the editor.

Likely an issue within the editor, or a specific consumer pattern?

[t-hamano]

This issue is similar to #55408.

The strange thing is that it happens when the editor is an iframe (meta boxes are disabled), but not when the editor is not an iframe (meta boxes are enabled).

bfcd321f425ca8e55c30bca4861d9f41.mp4

[talldan]

The strange thing is that it happens when the editor is an iframe (meta boxes are disabled), but not when the editor is not an iframe (meta boxes are enabled).

I haven't looked too deeply into it. I think it might be related to the offset of the iframe. I can see ariakit has some code that looks like this (as part of a hovercard component that tooltip seems to be based on):

if (enterPoint) {
    const currentPoint = getEventPoint(event);
    const polygon = getElementPolygon(element, enterPoint);
    if (isPointInPolygon(currentPoint, polygon)) {
        // ...              
    }
    // ...

It looks like the isPointInPolygon check that fails.