Using a darkening backdrop but having the item being pointed at non-clickable

I have a page in my application that I have 7 or 8 clickable items on. I want to guide the user through what the items do by using a backdrop to darken everything around what I am currently pointing to. I have a Next button at the bottom of each step, but technically, the user can click on the item I'm pointing at also... I don't want them to be able to click there.





  • Hey Jim, 

    You should be able to do this by going to the "Styling" tab and toggling on "Backdrop". There's also a checkbox to enable/disable the ability to click on the highlighted element.

  • Close... but I want to show what is below, but not have the item clickable.

  • What does your "Next" button do? If it just advances the guide, you can change the "Behavior" to "Advance on Element Click" and remove the next button completely. This way users know to click on the highlighted element, and that will take them to the next intended page & guide step.


  • Hello! Sorry for piggy backing this old post, but I want to know too if this is possible?

    The question is whether is possible to show the element, but to stop any clicking action within that element. We are doing a walkthrough through a navigation, and if the user clicks by mistake, they will go to a different page.

  • We have the same need and would love to see this request implemented in the Guide Designer. Having to hide the relevant UI element 'underneath' the backdrop to prevent it from being activated significantly compromises both visual clarity and user comprehension. This limitation is undercutting what should be a key value of the Guides for our customers. 

  • Any update here, we would like to show users through our app with out them being able to click into the highlighted area and taking them out of the tool tip onboarding experience. Should I be using another tool instead is there a work around?

  • Bumping this as I would also like a way of highlighting a specific element through the backdrop, but not have that element be clickable - as if it was still behind the backdrop.

  • Here's a possible solution. You can use this in a HTML code block to call the same CSS class used by the backdrop.

    <div class="pendo-backdrop-region-top _pendo-backdrop" pendo-region="top" style="top: 0px; height: 100%; left: 0px; width: 100%; z-index: -1; position: fixed; background-color: rgba(0, 0, 0, 0); opacity: 1; float: none; vertical-align: baseline; display: block;"></div>

    After the class is called the rest of the code then makes the div full screen and makes the backdrop fully transparent. Thus giving the appearance of having the element in question highlighted, whilst stopping any hover or click actions to elements underneath.


Please sign in to leave a comment.

Didn't find what you were looking for?

New post