Popovers on mobile overlay the highlighted element and ignore position: top

[tomhillgreyridge]

The default positioning behaviour of driver.js seems to cause some issues when on mobile.

I've cut this down to the simplest possible example, which can be viewed in this glitch

https://guiltless-classic-night.glitch.me/

Basically, due to the position and height of the element, driver.js tries to scroll the element into the centre of the viewport, but this then means the popover isn't shown above the selected element anymore - instead it overlays it completely, which (due to the small screen sizes on mobile) hides the content almost entirely.

What's odd is that if you then manually scroll the page, you can get the perfect solution - the tooltip is correctly shown above the top of the selected element

I can't find any way round this at the moment, as the position: top flag seems to be used for guidance and there is no way to "force" it.

[tomhillgreyridge]

Obviously, you'll need to either open the glitch on mobile, or use chrome developer tools in mobile emulation mode - I found that "Galaxy S8+" as the emulated device demonstrates the issue perfectly.

This is what driver.js does by default

and this is what it looks like if you manually scroll it afterwards