[Bug]: Tooltip is not correctly positioned with bundled icons

[burnnat]

Component

Tooltip

Package version

9.54.6

React version

18.3.1

Environment

System:
OS: Windows 11 10.0.22631
CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12800H
Memory: 17.33 GB / 63.67 GB
Browsers:
Edge: Chromium (127.0.2651.74)
Internet Explorer: 11.0.22621.3527
npmPackages:
@fluentui/react-components: * => 9.54.6
@fluentui/react-icons: * => 2.0.245
@types/react: 18 => 18.3.3
react: 18 => 18.3.1
react-dom: 18 => 18.3.1

Current Behavior

When a <Tooltip> element wraps a bundled icon created using bundleIcon() and the icon is hovered, the tooltip always displays in the top-left of the page.

Expected Behavior

When the bundled icon is hovered, the tooltip should be correctly positioned next to the icon on the page.

Reproduction

https://stackblitz.com/edit/djv8ha?file=src%2Fexample.tsx

Steps to reproduce

1. Hover mouse over the "like" (thumbs-up) icon.
2. Observe the "Working tooltip" is correctly positioned, directly above the icon.
3. Hover mouse over the "dislike" (thumbs-down) icon.
4. Observe the "Broken tooltip" is not correctly positioned, in the top-left corner of the page.

Are you reporting an Accessibility issue?

no

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[pradeept95]

Hi @burnnat ,

Bundle icon just stack two icon on top of each other and hide and shows based on user interaction like on hover.

Also, Tooltip expect single component or element as a child, If we bundle icon it will have multiple child element and tooltip will not work. As a workaround you can wrap your bundled icon inside span as follows and should work as expected.

// other stuff

const ThumbDislike = bundleIcon(ThumbDislikeFilled, ThumbDislikeRegular);

export const BundleIcon = () => {
  const styles = useStyles();

  return (
    <div className={styles.container}>
      <Tooltip content="Working tooltip" relationship="description">
        <ThumbLikeRegular aria-label="Bare icon" />
      </Tooltip>
      <Tooltip
        content="Wrap bundled icon in span. Will work"
        relationship="description"
      >
        <span>
          <ThumbDislike aria-label="Bundled icon" />
        </span>
      </Tooltip>
    </div>
  );
};

If anybody have other better solution, please suggest!

[ling1726]

A bundled icon does not forward refs or spread props, since it actually contains two different icons inside the bundle (regular, filled). As @pradeept95 said, you should wrap the icon with an intrinsic element.