TooltipHost position is wrong when wrapped component uses absolute position

[yajiex]

Here is the repro link: https://codepen.io/anon/pen/QojjBd. There is a button and wrapped with TooltipHost, the button's position is absolute. When hovering on the button, the tooltip shows at wrong position.

Environment Information

• Package version(s): latest version (not specified)
• Browser and OS versions: any browser

Please provide a reproduction of the bug in a codepen:

https://codepen.io/anon/pen/QojjBd

Actual behavior:

Tooltip's position is wrong.

Expected behavior:

Tooltip should be near the button.

Priorities and help requested:

Requested priority: Blocking

[leddie24]

Hi @yajiex, thanks for submitting this issue. After digging around on the component and getting some assistance from @joschect on this, you can fix this issue by adding an id to the button (or whatever you're positioning absolute), and then adding that ID as a target in the calloutProps of TooltipHost.

See codepen here:

https://codepen.io/leddie24/pen/NJxWJN

[yajiex]

Thanks, the workaround looks good to me. Do you think it's a bug or by design?

[msft-github-bot]

This issue has been marked as being beyond the support scope of UI Fabric's issues board. It will now be closed automatically for house-keeping purposes.

[leddie24]

Hey @yajiex , sorry for the bot closing this issue prematurely. This is definitely not by design (to have the tooltip not fix properly on absolute positioned elements), and seems more like a bug. However, with the workaround in place, I don't think it's something worth pursuing to fix when there are easy fixes. We can update the documentation in the future to showcase this scenario.

[yajiex]

Thanks, updating the doc sounds good!