Tooltip/popover placement update

[agr]

Addresses #9424 and maybe some others.

Old behavior

Tooltip always appears to the right of the "parent" element and is inserted after it into the DOM tree sharing the same parent. This results in two things:

1. tooltips often try to occupy as little horizontal space as possible:
   
2. When there is not enough space to the right to fit it, it is drawn off screen (and horizontal scrollbar appears for the window):
   

New behavior

Tooltips are now parented to the body element, which results in them using as much horizontal space as possible (up to the limits set in bootstrap CSS for those):

When there is little (<150 CSS pixels) space on the right side, the tooltip is shown above the "parent" element and if the page is scrolled down so that there isn't much space on top (<100 CSS pixels, fits 3 lines of text usually), it is drawn to the bottom of the "parent" element.

I had to resort to magic numbers in determining the direction as by the time placement function is called the exact size of the tooltip is undetermined.

The change is applied to all tooltips, so it addresses similar issues in other locations: blue checkmark tooltips on package details page and in search results, framework tooltips on package details page, etc.

getBoundingClientRect support matrix:

[joelverhagen]

Nice thinking checking the support matrix.

🚢