Z index breaks my guide.

I have a bug that prevents me from continuing on a guide I created. The guide appears but hides under the backdrop. I tried fixing it and changing the Z-index but nothing helps.



  • Hi Matan,

    Thanks for posting on the Community. It seems the Pendo guide is being displayed under a backdrop from their application. Unfortunately, there isn't an easy one size fits all solution to this. Modifying the z-index on its own may not be sufficient to position the guide, depending on how the backdrop is structured. 


    You may have to work with a developer on your side to take a closer look at the backdrop that is interfering w/the Pendo guide. 

  • But why? the backdrop is the backdrop from Pendo! If I check with inspect mod, I can see that the backdrop and the tooltip are both at the same Z-index....

  • This issue also affects us, as the z-index is customisable, but the backdrop z-index is not. The backdrop z-index should be automatically calculated by pendo as z-index minus 1.

  • We have the same issue and agree with andrew.kirwin (z-index minus 1!) Example: We need to set the z-index to 9999 to get guides to go under our static top nav however any z-index under 200,000 puts the guide behind Pendo's own backdrop. We need a way to set the backdrop z-index independently. At least from the theme if not on the individual container level.

  • Pendo support was able to help me out with this. In the theme's supplemental style section, you can set the z-index of the backdrop to be 1 less than the guide value or anything you want. 

    Would be nice to have a bit more control over this feature in the designer, but this worked for us.

  • We had this same problem with the pendo z-index/backdrop. We have a provisioning modal that must appear above everything else, including Pendo guides, so we needed to adjust the z-index of the guides AND the backdrop. Took some experimenting to get it right, but you can set the z-index of the backdrop in the supplemental styles (toggle "Advanced Options" on to see this section) like this: ._pendo-backdrop { z-index: 9000 !important; }. but replace 9000 with your desired z-index. It didn't work for me without the !important;

  • Confirming that we tried this and it worked for us on the first go of simply using the supplemental styles to make the z-index of the backdrop lower than the guide container.


Please sign in to leave a comment.

Didn't find what you were looking for?

New post