I'm trying to make a coach guide in my ionic app, using ion-popover. I don't want the event element (the element that is being explained by the coach text) to be in the dark area (the backdrop), but I want a specific styled backdrop on other elements. And I thought that might be a very normal thing to do UI-wise, but surprisingly I couldn't find any simple way to do it.
I tried giving higher z-index
, but the ion-backdrop
is out of ion-app
and the z-index of a lower element cannot have any effect. it has been suggested in a forum post and this question to make the element a direct child of the body, but I'm not sure if that's a right thing to do and also I'm not sure how to do it properly. Now The suggestion is old and for former versions of ionic. I was wondering whether there is a solution for this now (I am using Ionic 6, angular 14), or maybe another way to have a coach-guide that doesn't leave the element in the shadow.