Ensure mobile <abbr> tooltips don't appear off-screen

[Nallebeorn]

Closes #10917

To solve this, the tooltips need to be positioned based on their own size and the size of the viewport while remaining anchored to the clicked <abbr> element. This isn't possible with only CSS (at least not what is currently widely supported by browsers), so we need to calculate and apply some positioning adjustments in JS. Since pseudo elements can't be accessed from JS, the creation of the tooltip elements also has to move there.

The move from CSS to JS gives more flexibility in how to handle showing and hiding the tooltips, so they're now closed even when you tap again on the same word or on the tooltip (though if we want to keep the old behaviour there that would be possible too).

Mobile browsers have some non-standardized quirks when the size of the webpage is bigger than the window. This means the viewport used for layouting and reported to scripts may be bigger than the actual visual viewport, which poses a problem when we need to tell if an element is off-screen. To avoid these issues I set overflow-x on one of the inner divs so that the body element itself never overflows horizontally. As a side effect I think this also fixes an issue with the floating ReadTheDocs flyout being off-screen on pages that overflow on mobile.

I've tested the solution in Chrome and Firefox, but not yet in Safari.