Show a tooltip on element 2 only when element 1 is visible on the same page

I've created a tooltip that appears next to a certain element on a page. However, I want this tooltip to appear ONLY WHEN another element on the same page is present. So, as the first step, I only want to check if element 1 is visible on the page. If yes, then display the tooltip next to element 2. How can I achieve this?



  • Hi Divya, we had the same challenge in the past and achieved it by creating a 2 step guide

    Step 1 has no visible elements, is dependent on the element on the page, and contain JS that immediately advances the guide to step 2


    Step 2 is the visual step the user sees and is configured as normal (next to the element that you want)

    Hope that helps


  • Thanks for the solution, Alan. This does make sense.

    However, I'm not aware how we can create a step with no visual elements. I tried to add a step to my existing tooltip guide. It asked me to pick one of the several layouts, all of which have a visual element, like a tooltip, or an announement. Also, in the Code Block for step 1, do I need write a complete function with pendo.onGuideAdvanced(), where we check if element 1 is present?

    Sorry about my basic questions but I've recently started out with Pendo and still exploring.


  • For step 1, you can pick any layout you want, and then just delete each element within it in the designer (clicking the bin icon when hovering over each). The only thing you do want to have is a custom code block, and under the JS section, the only thing you should need to enter is the pendo.onGuideAdvanced(); line of code.  Nothing else.

    Make step 1 dependent on the element you want to check for (via the normal process in the guide designer under Location tab)

    So Pendo should then trigger the guide based on the element being present, and step 1 should auto forward to step 2.   If there is any flicker when the guide transitions from step 1->2, you may want to tweak the settings a little for step 1 (make the background transparent, zero border, etc.)


  • That is really helpful information, Alan! Thanks a lot. I'll try this.

  • Hi Alan, it worked partially for me. Just that the badge icon is appearing on element 1 instead of element 2. The activation settings and the badge placement are based on the element location in step 1, which is where I'm only checking for the presence of element 1. Like you suggested, I only have the code block in step 1 and the badge icon needs to appear next to element 2. One last help with this please?

    Here are a few images of the elements and the designer to give you a better picture. Hope this gives you some idea.

  • Ah! I hadn't picked up that it was a badge activated guide.  That makes things more complex. I can't think of an immediate solution to that but will respond if I do.

  • No worries, Alan. You've shared some really helpful information. Please do let me know if you find a solution to this. Thanks!