[Tooltip] Rework the implementation

[oliviertassinari]

I'm sorry, I should have done smaller pull requests fixing one issue after another, but it was so much fun! Yes, it's closing 20 issues. Hopefully, it's not introducing any breaking changes.

• Fix horizontal scroll when content overflow (ex with the table demo page).
  Closes [ToolTip] Tables with ToolTips create extra space on screen #11350, Closes [Tooltip] Wrongly created initial tooltip positioning after resizing the window enough which results in scrollbars #9362
• Fix a lot of W3C errors related to a wrong accessibility attribute.
• Remove the id requirement for accessibility, we are generating it when possible.
• Warn on unsupported prop-types (use exactProps for that) provided to the Tootlip.
• Fix ClickAwayListener with multiple children. It should be a single node. It's a ReactDOM.findDOMNode API limitation.
• Add a disablePortal property to the Portal.
  Closes [ClickAwayListener] Triggers on Select (and more) #12034
• Support different transitions with the new TransitionComponent property.
• Fix the performance overhead. Now, we can render 100 tooltips on a single page 🚀 .
  Closes Tooltip performances makes them unusable on large scales since v1.0.0-beta.40 #11431
• Only mount the tooltip when needed.
  Closes [Tooltip] Unmount Tooltip on exit and mount on enter #10909
• Add a PopperProps property so people can provide their own container property.
  Closes How can I make elements such as select menus, tooltip, etc. render in a specific DOM element? #11454
• Remove react-popper, replace it with a Popper component. I have been trying to upgrade react-popper to v1 in [Tooltip] Update react-popper #11862, but I had to revert with [Tooltip] Revert update react-popper #11920. I fail to see the value react-popper is providing over using Popper.js directly, worse, I find it harming performances (higher payload + many rerender) and code comprehension. So, I think that we are better off without. We are going down one level of abstraction. Save 1 kB gzipped 🚀
  The Popper is a wrapper on top of Popper.js with some additional feature (transition, portal and rtl). In the future, we could look into making Popper a wrapper on top of Modal so we can have some extra focus and keyboard feature.
  Closes Cannot find module 'react-popper' #11197, Closes Support scroll and reposition of Popover #11796
• Fix the menu grow transition origin when placement update for lack of space (flip).
  Closes [Document] Bug of the Menus document's example #11882
• The workaround is simple enough to let users handle it. They can create a wrapper component if needed. Bootstrap is simply documenting the workaround: https://getbootstrap.com/docs/4.0/components/popovers/#disabled-elements. We do the same with the warning.
  Closes Allow tooltips to function on disabled elements #11601
• The default behavior of the majorities of the tooltips implementation is not to allow people to copy the code within the tooltip. Given the tooltip can be controlled and the introduction of the Popper component. People can use custom event handler logic. I have added a click demo.
  Closes [Tooltip] Tooltips should not disappear when hovered #11705.
• Add a customization demos with light and arrow.
  Closes [Tooltip] How to customize the tooltip? #11467
• Add a demo that portals the results of an autocomplete query.
  Closes Autocomplete dropdown options hided by dialog. #11824, Closes Ability to override Modal container inside Popover #11733
• The tooltip can be controlled.
  Closes Tooltip stays displayed on top of MenuItem components of a Select component #11186
• Can't find any leverage for Text in Tooltip component is blurry on secondary Retina Screen #12056. Popper.js is already rounding the values.
  Closes Text in Tooltip component is blurry on secondary Retina Screen #12056.
• When using the portal we can use the modifiers.preventOverflow.boundariesElement = viewport option of Popper.js.
  Closes [Tooltip] Flickers when overlaped with element it is attached to #10735, Closes Allow tooltips on tabs #10714, Closes Tooltip does not show when hover on MenuItem #10502
• No relying on react-overlay helped me. I was able to add a disablePortal property. In the future, I would like to explore if we can make Popper rely on the Modal component. This will require to dive into the internal of the Modal. Like blueprint is doing with their Popover and Overlay component.
  Closes Use react-overlays directly? #10479

---

The implementations I have been benchmarking before / during the effort:

• https://kazzkiq.github.io/balloon.css/
• https://github.com/textpress/react-tippy/blob/master/src/Tooltip/component.js
• https://github.com/atomiks/tippyjs
• http://blueprintjs.com/docs/v2/#core/components/tooltip
• https://getbootstrap.com/docs/4.1/components/tooltips/
• https://reactstrap.github.io/components/tooltips/

[oliviertassinari]

🚀

[dmythro]

@oliviertassinari, regarding #10909. Tooltips are used for Accessibility only when mounted (aria-labeledby). Are you sure it doesn't break anything without mounted ones?

[oliviertassinari]

@Z-AX If people are providing a string title property, we apply it to the children when the tooltip is closed. This is the nominal use case. We are good.
What if people are providing something else? We have the aria-labeledby. Let me know if you think we need something else for a11y.

[mbrookes]

@oliviertassinari Awesome job!

[dmythro]

Thanks! We'll check this out within the next sprint.

[bcolloran]

Rad, this looks like exactly what my team needs for some perf issues we've been trying to get to the bottom of. I'm not familiar with your release process -- any idea roughly how long it might be until this patch is rolled into a release and available on NPM? I want to be sure to update when it's ready!

Thanks for your work on this! 👍

[oliviertassinari]

I need it too for the office. We have a critical screen that surfers from an important performance issue.
It will be release this weekend. I didn't want to release it right away. It's a major refacto. It's safer this way.