Upgrade Popper and react-popper-tooltip

[coderkevin]

Our tooltips use an old version of Popper and react-popper-tooltip, and upgrading to a new version is non-trivial and will require updating to use hooks.

[kylesuss]

As a side note, when doing this task, be aware of the issues presented in this PR:

https://github.com/chromaui/chromatic/pull/5236

It would be ideal if the tooltip had a correct placement on the screen when it mounts so that we can avoid certain workarounds addressed there.

If not, perhaps it is a good time to look into other options & assess feasibility of using them.

[FezVrasta]

Could you provide some info about the linked ticket? I think it’s a private repo.

I’d like to understand what I can do to address the issues on Popper or react-popper directly

[kylesuss]

Sure. The linked ticket is for a PR where we added a workaround to find out when the tooltip is "ready" (aka mounted & placed on the screen). The library mounts the tooltip first & then after that, determines where to put the tooltip, so you need to wait for that event to scroll it into view because otherwise, the placement will change immediately and break the scroll process.

We made a custom workaround for this for an older version of the lib, but I believe the newer version offers a callback to handle it: onFirstUpdate:

https://popper.js.org/docs/v2/lifecycle/#hook-into-the-lifecycle

[FezVrasta]

Sure. The linked ticket is for a PR where we added a workaround to find out when the tooltip is "ready" (aka mounted & placed on the screen). The library mounts the tooltip first & then after that, determines where to put the tooltip, so you need to wait for that event to scroll it into view because otherwise, the placement will change immediately and break the scroll process.

We made a custom workaround for this for an older version of the lib, but I believe the newer version offers a callback to handle it: onFirstUpdate:

https://popper.js.org/docs/v2/lifecycle/#hook-into-the-lifecycle

You can also have custom modifiers with logic that runs on "mount" and "unmount" with the effect property

[kylesuss]

@FezVrasta We are still on 1.x and if I recall, you can hook into the update cycle via the modifiers, but when I last looked into this, I couldn't figure out how to just get something to run only when placed (or how to tell in the callback that runs on each update that something had been placed). You think that would be available to us? Any ideas/links on how to execute?

[FezVrasta]

@FezVrasta We are still on 1.x and if I recall, you can hook into the update cycle via the modifiers, but when I last looked into this, I couldn't figure out how to just get something to run only when placed (or how to tell in the callback that runs on each update that something had been placed). You think that would be available to us? Any ideas/links on how to execute?

I was referring to the v2 API, I don't think anything like that is available on v1, I'm sorry

[MichaelArestad]

Is this something we can do in the near-future? It would be great to be able to set the distance from origin for the tooltips.