fix: Fix Tooltip positioning

[suzubara]

Summary

Updates the code used to position the Tooltip component to reflect USWDS 2.11.2 Tooltip source code. This seems to resolve the positioning bug.

Related Issues or PRs

Fixes #1877

How To Test

View the Tooltip component in Storybook at various screen sizes and verify the tooltip is always visible and positioned as expected.

Screenshots (optional)

[suzubara]

While trying this branch out on my project, I realized that there were more issues with positioning - the code to loop through the various positions wasn’t working as expected. I think it was because the code to set the new CSS and check if the element was visible or not were all happening in the same useEffect hook, but to accurately detect whether or not the element is visible it needs to wait for the re-render. So I did some more refactoring and pushed up an update that I think solves this once and for all!

The new way this works is: when the tooltip gets shown, it sets the position to whatever was intended. in a second useEffect hook that specifically looks for changes in the position, it checks whether the tooltip is visible. If it is, it turns on the is-visible class and that’s that. if it’s not, it starts the loop to go through each position (and also try wrapping text if needed).

It is possible that it won’t find a position that works… this might happen if the tooltip contents is very long and/or the window is SO small that there’s no room. I checked and this can come up in the USWDS implementation as well. I put a console.warn in this case to surface the issue.

I also added more Storybook stories to demonstrate the auto-positioning/wrapping (try changing the viewport size).

Finally… while working on this I also discovered what I think is a USWDS bug so I filed uswds/uswds#4458
but to fix in the meantime, I just added that line of CSS to our lib.. hopefully it can be removed when the bug is fixed.

[brandonlenz]

Nice!

[brandonlenz]

Something I just noticed (not for us to fix here): Looks like the tooltip takes the component's margin into account causing top not to be centered on the element, for example:

But its the same way in the USWDS example, so we're good!!