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.
Screenshot of the issue
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.