WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.49k stars 4.19k forks source link

`<Tooltip>` Component Hover Broken #63269

Open ObliviousHarmony opened 3 months ago

ObliviousHarmony commented 3 months ago

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

https://github.com/WordPress/gutenberg/assets/6451942/68e05d33-0418-462e-95bc-8ea91f632937

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

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 commented 3 months ago

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 commented 3 months ago

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).

https://github.com/WordPress/gutenberg/assets/54422211/091162a2-af29-48b1-bc36-110b13b62b24

talldan commented 3 months ago

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.