Skip to content

<Tooltip> Component Hover Broken #63269

Closed as not planned
Closed as not planned
<Tooltip> Component Hover Broken#63269
Labels
[Type] BugAn existing feature does not function as intended

Description

@ObliviousHarmony
ObliviousHarmony
opened on Jul 8, 2024

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

Activity

  1. ObliviousHarmony
    added
    [Type] BugAn existing feature does not function as intended
    on Jul 8, 2024

  2. mirka commented on Jul 8, 2024

    @mirka
    mirka
    on Jul 8, 2024
    Member

    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?

  3. t-hamano commented on Jul 9, 2024

    @t-hamano
    t-hamano
    on Jul 9, 2024
    Contributor

    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

  4. talldan commented on Jul 9, 2024

    @talldan
    talldan
    on Jul 9, 2024
    Contributor

    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.

  5. ObliviousHarmony
    closed this as not plannedon Jun 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Type] BugAn existing feature does not function as intended

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions