Render Tooltip via React Portal

[jahe]

What:

In this PR we're adding a new prop container to the Tooltip component where the tooltip should be rendered into.
​
Why:

This PR closes #349.

Tooltips that are rendered in Modal dialogs can cause scrollbars to appear. It was not like that in previous version of wave (1.15.1).

How:

• Introduce new (optional) prop container to Tooltip component where the tooltip body should be rendered into
• Render the tooltip body into container via react portal
• See internal discussion
• Implementation according to popper library documentation
  ​
  Media:

Before:

After:

Checklist:

• Ready to be merged
  

[nlopin]

What do you think if we create a portal by default and attach it to the document.body?
Our users won't even face the issue anymore in that case, the whole issue disappear. I don't see any negative sides on this solution

[jahe]

Good idea. We would need to put a big enough z-index on the tooltip then so that it gets rendered on top of modals. With my changes the responsibility for that is delegated to the user of the library which is not very convenient. I agree that it would be better if the library makes sure that it "just works".

create a portal by default

Do you mean using document.body as portal to render tooltips in any case instead of doing it conditionally? In that case we could remove the container prop.

[nlopin]

Do you mean using document.body as portal to render tooltips in any case instead of doing it conditionally? In that case we could remove the container prop.

Yes, I'd do that. In that case the z-index won't gonna be necessary because the tooltip will be sitting on top of the tree and in a separate stacking context

[jahe]

The issue is that Modals come with z-index: 1100 which makes them appear on top of elements that are rendered in a separate stacking context (see example).

[jahe]

I've removed the container prop in 94b053c. Tooltips are rendered via React Portal into document.body now.

[github-actions]

🎉 This PR is included in version 3.0.0-next.1 🎉

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot 📦🚀