fluentui
fluentui copied to clipboard
microsoft
[Bug]: Unable to attach Tooltip to an icon
Library
React Components / v9 (@fluentui/react-components)
System Info
Fluent UI v9
Are you reporting Accessibility issue?
No response
Reproduction
https://codesandbox.io/s/loader-migration-fluentui-forked-5c5wd7?file=/example.tsx
Bug Description
Actual Behavior
When a tooltip is attached to an icon, hovering over the icon does not show the tooltip
Expected Behavior
Tooltip is shown when the user hovers on an icon.
Attaching tooltips on non-focusable elements is not accessible. However in cases where feature teams find an alternative and approved way of presenting the information to screen reader and keyboard users, there needs to be a possibility to have tooltip on an icon.
Logs
No response
Requested priority
High
Products/sites affected
Teams
Are you willing to submit a PR to fix?
no
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.
When I run on localhost using yarn start, the tooltip isn't working. Everytime I hover over it, it appends a new div to page's body. But when I run the assets generated by yarn build it works.
It looks like this is caused by the fact that icons from @fluentui/react-icons don't currently forward refs to their underlying DOM element, which is a requirement for v9 Tooltip. (Or any v9 popup element; attempting to attach a Popover to an icon also doesn't work, though nobody would actually do that). There's a console error in the repro codesandbox when trying to show the tooltip:
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
I'm going to assign this to @tomi-msft to make the fix in the @fluentui/react-icons package.
The PR above fixes this issue, but need to confirm if we consider this a breaking change and need to major rev the package.
This will need a major verision bump to react-icons. We're going to wait and do it at the same time as https://github.com/microsoft/fluentui/issues/25989