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

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

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

Are you reporting an Accessibility issue?

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

Validations

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

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!

microsoft / fluentui