I would like to realize a simple tutorial to explain the role of the specific areas of my website realised with popovers.
My idea is that when user clicks on the button start tutorial, then some popovers are displayed in sequence on different elements, and when a popover is open, the rest of the screen is blocked and the user can only press next to close the current popover and open the following one, until the tutorial is concluded.
How can i do that?
When the modal is open, you have to use JS to temporarily add overflow:hidden to the body element (this will remove the scroll bars on the main window and prevent scrolling.)
The markup to manage this class toggle on the body has already been answered/provided here: