feat(tooltip): expose Popper.js modifiers

[pa3]

Popper.js, which our Tooltip relies on, provides a powerful way of altering tooltip behaviour by using so called modifiers: https://popper.js.org/popper-documentation.html#modifiers

In some tricky cases they can really help properly place your tooltip. Instead of extending Tooltip's API case-by-case when facing them (at the moment I need a way to provide preventOverflow modifier to achieve proper positioning of a tooltip in MC), I suggest just expose all of them at once.

By doing this, we are paying a price of leaking internal implementation details of Tooltip component, but on the other hand leveraging lot of power of the underlying lib.

[montezume]

Thanks 👍

[tdeekens]

Interesting. So we are are fine with "leaking" what our component library uses underneath to the consumers. As an alternative to wrapping that API in a minimal way to encapsulate it?

[montezume]

@tdeekens yes that's exactly what @pa3 brought up, but I couldn't see a good way of getting around this...

[tdeekens]

Ah okay cool so it was a concern before. Curious now (I trust your judgement) what is the exact case where we need more control over the positioning?

[pa3]

@tdeekens I don't like this leaking as well, but as @montezume said, looks like it the least pain in the ass for everyone.

My specific use-case, why I need it is showing tooltip inside scrollable container, so that it will be shown outside of that container. Looks like the popper is smart enough to figure out that element with a tooltip is a child of scrollable container and tries to keep it inside of parent's boundaries.

I created a branch with a story reproducing my use-case: https://github.com/commercetools/ui-kit/blob/pa3-tooltip-issue/src/components/tooltip/tooltip-bug.story.js

Too save you some time with running this example on your machine, let me provide some screenshots, illustrating the intent. This is a simplified layout we have in one of the pages of MC:

Right column is considered a scrollable container by Popper. What I want to see when hover on the button:

And I didn't find a way to achieve this without providing way to set modifiers. Without specifying modifiers tooltip is show like that:

[tdeekens]

Thanks for the illustration. Was easy to grasp the issue with it!

Generally I agree that exposing poppers API through our Tooltip implementation is the least hassle. We just have to buy into the obvious trade-off that:

1. Any breaking change to popper in that part of its API is a breaking release for UIKit
2. If at any point in the future we decide to remove popper it will a) be painful and b) likely be breaking for UIKit

Accepting those drawbacks comes at the benefit of being less a pain of adding it now.

What I am generally wondering is:

1. Do we need to expose the full modifiers API or can be expose just the subset we need right now
   • To reduce the surface area of breaking changes as we never know who and how the tooltip will be used
2. I presume loads if messing with TooltipWrapperComponent and portals has happened to get the placement through a portal in another part of the document which was deemed to be even more nasty

[montezume]

Yeah, I guess just exposing the required modification makes sense for now. Then if we make changes to the underlying implementation of Tooltip, it will be a lot easier to keep track of the breaking changes...