It is now no longer super buggy!

Firstly it will not overflow out of view when there is no space.
Through the `popper` library, it will find the most suitable postion.
No more need for the `renderDirection` prop and hacky calculations.

Another nice feature is that it will point to the right direction even
when the trigger component is flexed, which it often is. This is most
noticeable on tables.

Some minor styling changes as well, but that's not really the important
part of this change. Worth noting that there is no longer an annoying
buggy line between the arrow and the tooltip whenever there's a bad
render.