Tooltip Primitive doesn't position correctly when inner content changes.

[dholliday3]

Thanks for helping make Paste better! Note: For urgent requests, reach out at #help-design-system

Describe the bug
When changing the text inside of a TooltipPrimitive the box will align to the previous state of the TooltipPrimitive instead of staying centered.

The need to keep the Tooltip centered arises when the inner text changes for a tooltip based on some state i.e. clicked, not clicked.

To Reproduce
Steps to reproduce the behavior:

1. Have different text for the Tooltip that differ in length
2. Change the text based on an event (i.e. button click).
3. See how the Tooltip retains original starting position based on the previous text instead of recentering based on the current text.

Expected behavior
The tooltip should position itself based on the current state instead of position based on the previous tooltip content.

Screenshots
Screenshots replicating behavior using the TooltipPrimitive.

Desktop (please complete the following information):

• OS: MacOS
• Browser - any

Additional context
Add any other context about the problem here.

[nkrantz]

Hi @dholliday3! So sorry for the delay on this. I've shared the bug with the team and we'll be back with an update shortly. Thanks for finding this bug!

[nkrantz]

Here with an update! Shadi did some awesome digging into a possible workaround for enforcing recalculation of tooltip position. We've also filed an issue with Reakit to try to address this. In the meantime, feel free to use Shadi's workaround which uses useEffect to watch for when the tooltip text changes, then uses the tooltip .hide() and .show() methods to recalculate the placement. Please let us know if you continue to have trouble with Tooltip and feel free to follow along on the Reakit issue.

[charleneyjh1]

Hi @nkrantz, thanks for your response.
We'd like to confirm is there a timeline for when the tooltip issue is gonna be permanently fixed in the Paste library? Our team ideally don't want to do ad-hoc fixes as we will need to revert it when the new library is available.

We're using it for the copy auth token feature on the Account Dashboard, so it's a highly visible for all customers. Can we prioritize this fix?

[SiTaggart]

Sorry for the delay. As pointed out in the github issue we filed on the library we use, by the maintainer, the approach we recommend as a work around is likely "the right thing to do" and there won't be an automatic fix.

This behavior shouldn't break in the future, either, so it's safe to use.

[charleneyjh1]

Thank you @SiTaggart ! I'll go with the recommended workaround.

[nkrantz]

Update: Ariakit (formerly Reakit) is now using Floating UI for their tooltip in v2 which has a ResizeObserver so they've closed the issue.

[dholliday3]

Thanks!