Description When using introjs on mobile devices with a screen width of less than 600px, the tooltip ends up covering the element. When I hold the device horizontally, the tooltip adjusts its position accordingly. I attempted to apply custom CSS to the tooltip, but when the screen is under 600px, the CSS rules I set break, causing the element to center itself and the tooltip to appear above it.
Expected Behavior I expect the tooltip to display below the element as instructed.
I even tried adding a top margin of 50px to the tooltip in a custom CSS file. However, this adjustment only works when the screen is wider; otherwise, the tooltip still covers the element.
Actual Behavior The tooltip still covers the element.
Errors and Screenshots (optional) No errors are displayed in the console.
This video showcases the problem: https://youtu.be/ptFB5ZrL8ks
For more details:
This issue has also been discussed here.
I have added a margin to .introjs-tooltip{} in this custom CSS file. However, the margin only takes effect when the body of the window exceeds approximately 600px.