Fix tooltip re-position after content resize & respect scroll bars

[chandlerprall]

fast follow for #924

• EuiTooltip did not clear its previous knowledge of the tooltip content's size so a window resize & re-hover of the anchor would cause the new tooltip to be influenced by the previous instance's positioning
• small adjustment (1px) to tooltip's arrow position
• Popover service did not take scroll bars into account when finding available window size
• Popover service did not take buffer into account when calculating the content's fit value

@cchaos would you mind testing the visuals again to see if you can find any circumstances where tooltip breaks / is malformed?

[chandlerprall]

This change is in response to buffer now being used to compute fit

[cjcenizal]

This is really awesome man! Nice job fixing this. I found one bug though. Horizontal centering looks fine if there are scrollbars visible, but if there aren't then it looks off-center (Chrome, OS X):

Also, I somehow managed to break things really badly by changing the size of the container element. Here's a screenshot showing the bottom tooltip, but the others are also fubared:

[cchaos]

I am able to reproduce those issues that @cjcenizal found. Here are some more details.

---

The first one seems to have to only occur when the page reaches it's max-width. Here you can see without scrollbars it's still fine but the screen is smaller than the max-width.

And here you can see that once it's reached the max-width the positioning becomes slightly off.

---

The second one also seems to have to do with the max-width on the page. Here are two screenshots of giant width on the guide, one with the max-width and the other without.

[chandlerprall]

@cchaos @cjcenizal tooltip creation now configured to avoid creating scrollbars while determining tooltip placement, this fixes the slightly-misaligned tooltip when no scrollbar is visible.

The second problem where the arrow and tooltip are separated is caused by the relationship between the anchor, tooltip, and page body. If you force the anchor to be rendered outside of the page body's bounds (by, saying, giving guide a width of 5000px while body maxes out around 1200px), then the anchor & tooltip position are correctly computed, but then the browser tries to render the tooltip (whose parent is body) outside of body's bounds, correctly determines the tooltip's width doesn't fit in the parent's bounds, and does its best by inserting a ton of line breaks. The "fix" for this is don't have content that flows outside of the body element. If we absolutely need to support this case there is a way but I strongly suspect we don't need to.

[snide]

don't have content that flows outside of the body element

I can't think of a time when we'd need this. The body should be the visible page. At least that's how we've been using it. I think we're OK not worrying too much about this.

[cjcenizal]

LGTM!

[cchaos]

Thanks for fixing these!